Question

问题： 1. ember构建过程以警告完成，并以腐败的输出文件结束，该文件在chrome客户端上抛出Uncaught SyntaxError: Invalid or unexpected token，这会阻止应用程序加载。

症状： 1.＆＃34;在bower install bootstrap --save和必要的app.import(...)命令之后，ember构建过程抛出了几个警告[BABEL]: the code generator has deoptimised the styling of bower_components/bootsrap/....../jquery.js as it exceeds the max of 100KB，然后是129个JSHint错误。

JSHint错误的前几行：

bower_components/bootstrap/Gruntfile.js: line 8, col 1, 'module' is not defined. bower_components/bootstrap/Gruntfile.js: line 18, col 12, 'require' is not defined. bower_components/bootstrap/Gruntfile.js: line 19, col 14, 'require' is not defined. bower_components/bootstrap/Gruntfile.js: line 20, col 32, 'require' is not defined. bower_components/bootstrap/Gruntfile.js: line 21, col 25, 'require' is not defined. bower_components/bootstrap/Gruntfile.js: line 28, col 26, 'require' is not defined. bower_components/bootstrap/Gruntfile.js: line 29, col 32, 'require' is not defined. bower_components/bootstrap/Gruntfile.js: line 434, col 3, 'require' is not defined. bower_components/bootstrap/Gruntfile.js: line 435, col 3, 'require' is not defined. bower_components/bootstrap/Gruntfile.js: line 23, col 30, '__dirname' is not defined. bower_components/bootstrap/Gruntfile.js: line 395, col 18, 'process' is not defined. bower_components/bootstrap/Gruntfile.js: line 441, col 13, 'process' is not defined. bower_components/bootstrap/Gruntfile.js: line 441, col 38, 'process' is not defined. bower_components/bootstrap/Gruntfile.js: line 452, col 7, 'process' is not defined. bower_components/bootstrap/Gruntfile.js: line 458, col 24, 'process' is not defined. bower_components/bootstrap/Gruntfile.js: line 462, col 14, 'process' is not defined. bower_components/bootstrap/Gruntfile.js: line 466, col 24, 'process' is not defined 17 errors bower_components/bootstrap/dist/js/bootstrap.js: line 8, col 61, Missing semicolon. bower_components/bootstrap/dist/js/bootstrap.js: line 13, col 53, Missing semicolon. bower_components/bootstrap/dist/js/bootstrap.js: line 14, col 59, Expected '===' and instead saw '=='. bower_components/bootstrap/dist/js/bootstrap.js: line 14, col 78, Expected '===' and instead saw '=='. bower_components/bootstrap/dist/js/bootstrap.js: line 15, col 113, Missing semicolon. bower_components/bootstrap/dist/js/bootstrap.js: line 17, col 9, Expected an assignment or function call and instead saw an expression. bower_components/bootstrap/dist/js/bootstrap.js: line 35, col 49, Missing semicolon. bower_components/bootstrap/dist/js/bootstrap.js: line 42, col 6, Missing semicolon.

和类似的错误指向＆＃39; bootstrap＆＃39;中的文件文件夹（不存在）和＆＃39; jquery＆＃39; bower_components中的文件夹

恢复到没有引导程序的配置并没有解决问题，即使没有“引导程序”，构建过程也会抛出相同的错误。文件夹存在于＆＃34; bower_components＆＃34;夹
余烬-CLI-build.js

``

/*jshint node:true*/
/* global require, module */
 var EmberApp = require('ember-cli/lib/broccoli/ember-app');

 module.exports = function(defaults) {
   var app = new EmberApp(defaults, {
     // Add options here
   });                                                                                                                                              

   // Use app.import to add additional libraries to the generated
   // output files.
   //
   // If you need to use different assets in different
   // environments, specify an object as the first parameter. That
   // object's keys should be the environment name and the values
   // should be the asset to use in that environment.
   //
   // If the library that you are including contains AMD or ES6
   // modules that you would like to import into your application
   // please specify an object with the list of modules as keys
   // along with the exports of each module as its value.

 //      app.import('bower_components/bootstrap/dist/css/bootstrap.css');
 //      app.import('bower_components/bootstrap/dist/css/bootstrap-theme.css');
 //      app.import('bower_components/bootstrap/dist/js/bootstrap.js');
     return app.toTree();
 };

``

bower.json

{ "name": "ember-client", "dependencies": { "ember": "~2.10.0", "ember-cli-shims": "0.1.3", "jquery": "^3.2.1" } }
的package.json

{ "name": "ember-client", "version": "0.0.0", "description": "Small description for ember-client goes here", "license": "MIT", "author": "", "directories": { "doc": "doc", "test": "tests" }, "repository": "", "scripts": { "build": "ember build", "start": "ember server", "test": "ember test" }, "devDependencies": { "broccoli-asset-rev": "^2.4.5", "ember-ajax": "^2.4.1", "ember-cli": "2.10.0", "ember-cli-app-version": "^2.0.0", "ember-cli-babel": "^5.1.7", "ember-cli-dependency-checker": "^1.3.0", "ember-cli-htmlbars": "^1.0.10", "ember-cli-htmlbars-inline-precompile": "^0.3.3", "ember-cli-inject-live-reload": "^1.4.1", "ember-cli-jshint": "^2.0.1", "ember-cli-qunit": "^3.0.1", "ember-cli-release": "^0.2.9", "ember-cli-sri": "^2.1.0", "ember-cli-test-loader": "^1.1.0", "ember-cli-uglify": "^1.2.0", "ember-data": "^2.10.0", "ember-export-application-global": "^1.0.5", "ember-load-initializers": "^0.5.1", "ember-resolver": "^2.0.3", "ember-simple-auth": "1.2.0", "ember-welcome-page": "^1.0.3", "loader.js": "^4.0.10" }, "engines": { "node": ">= 0.12.0" }, "private": true, "dependencies": { "ember-ajax": "2.5.6" } }

文件 ember-client.js 中的结果错误（在dist文件夹中编译的ember build输出） 文件深处埋藏了一行#!/usr/bin/env node，导致客户端上的问题

    grunt.log.writeln('File ' + rawFilesJs.cyan + ' created.');
    };
  });

  #!/usr/bin/env node 

  define('ember-client/bower_components/bootstrap/grunt/change-version', ['exports'], function (exports) {
    'use strict';

    /* globals Set */
    /*!

快速修复： 1.在dist文件夹中编译的js文件（ ember-client.js ）中存在未捕获的语法错误，删除语法错误（在下面的代码中突出显示）修复了未被捕获的语法错误＆＃39;问题，以便应用程序可以在浏览器中成功加载。

问题： a）为什么会这样？ b）如何在不必每次构建应用程序时手动编辑编译文件的情况下永久修复此问题？

我查看了其他stackoverflow讨论，但仍无法解决与我的具体案例相关的问题。

其他类似问题的讨论： Discussion # 1

Discussion # 2

Discussion # 3

Answer 1

您正在遇到问题，因为您正在从Bower进行导入。如果您使用此Ember插件，它应该为您处理一些复杂的导入：https://github.com/ef4/ember-sass-bootstrap

ef4是Ember核心团队的成员，因此您通常可以信任他的插件。

ember构建错误：代码生成器已经优化了样式，因为它超过了100KB的最大值

1 个答案: