ember build error: the code generator has deoptimised the styling of as it exceeds the max of 100KB
ember build error: the code generator has deoptimised the styling of as it exceeds the max of 100KB
问题:
1. ember 构建过程以警告结束并以损坏的输出文件告终,该文件在 chromium 客户端上抛出 Uncaught SyntaxError: Invalid or unexpected token
,阻止应用程序加载。
症状:
1.“在 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.
和指向 'bootstrap' 文件夹(不存在)和 bower_components
中的 'jquery' 文件夹中的文件的类似错误
在没有 bootstrap 的情况下恢复到配置没有解决问题,即使 "bower_components" 中不存在 'bootstrap' 文件夹,构建过程也会抛出相同的错误文件夹
ember-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
{<br>
"name": "ember-client",
"dependencies":{
"ember": "~2.10.0",
"ember-cli-shims": "0.1.3",
"jquery": "^3.2.1"
}
}
package.json
{<br>
"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": 是的,
"dependencies":{
"ember-ajax": "2.5.6"
}
}
文件 ember-client.js 中的结果错误(ember 在 dist 文件夹中构建的编译输出)
在文件的深处隐藏了一行 #!/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)存在未捕获的语法错误,去除语法错误(下面代码高亮显示) ) 修复了 'uncaught syntax error' 问题,因此应用可以在浏览器中成功加载。
问题:
a) 为什么会这样?
b) 如何永久解决此问题,而无需在每次构建应用程序时手动编辑编译文件?
我查看了其他 Whosebug 讨论,但仍未解决与我的具体案例相关的问题。
其他类似问题的讨论:
Discussion # 1
您 运行 陷入了这个问题,因为您正在从 Bower 进行导入。如果你使用这个 Ember 插件,它应该会为你处理一些复杂的导入:https://github.com/ef4/ember-sass-bootstrap
ef4 在 Ember 核心团队中,因此您通常可以信任他的插件。
问题:
1. ember 构建过程以警告结束并以损坏的输出文件告终,该文件在 chromium 客户端上抛出 Uncaught SyntaxError: Invalid or unexpected token
,阻止应用程序加载。
症状:
1.“在 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.
和指向 'bootstrap' 文件夹(不存在)和 bower_components
中的 'jquery' 文件夹中的文件的类似错误在没有 bootstrap 的情况下恢复到配置没有解决问题,即使 "bower_components" 中不存在 'bootstrap' 文件夹,构建过程也会抛出相同的错误文件夹
ember-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
{<br> "name": "ember-client", "dependencies":{ "ember": "~2.10.0", "ember-cli-shims": "0.1.3", "jquery": "^3.2.1" } }
package.json
{<br> "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": 是的, "dependencies":{ "ember-ajax": "2.5.6" } }
文件 ember-client.js 中的结果错误(ember 在 dist 文件夹中构建的编译输出)
在文件的深处隐藏了一行 #!/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)存在未捕获的语法错误,去除语法错误(下面代码高亮显示) ) 修复了 'uncaught syntax error' 问题,因此应用可以在浏览器中成功加载。
问题: a) 为什么会这样? b) 如何永久解决此问题,而无需在每次构建应用程序时手动编辑编译文件?
我查看了其他 Whosebug 讨论,但仍未解决与我的具体案例相关的问题。
其他类似问题的讨论: Discussion # 1
您 运行 陷入了这个问题,因为您正在从 Bower 进行导入。如果你使用这个 Ember 插件,它应该会为你处理一些复杂的导入:https://github.com/ef4/ember-sass-bootstrap
ef4 在 Ember 核心团队中,因此您通常可以信任他的插件。