JavaScript用babel在angular js gulp源映射ngannonate中内存不足 [英] JavaScript heap out of memory in angular js gulp sourcemap ngannonate with babel
本文介绍了JavaScript用babel在angular js gulp源映射ngannonate中内存不足的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的Angular JS项目中使用es6语法，但是在运行gulp build，在github上搜索时会引发错误，所以有人说这是由于gulp uglify而引起的错误，而有人说这是babel问题，而有人说ng-匿名问题.
I am using es6 syntax in my angular JS project but it throws error when run gulp build, search over github and So but some saying this is error due to gulp uglify while some say this is babel issue and other say ng-annonate issue.
ubuntu 14.04
节点-v: 8.4.0
npm -v: 5.3.0
babel --version: 6.26.0 (babel-core 6.26.0)
babel --version : 6.26.0 (babel-core 6.26.0)
package.json
{
"name": "Project",
"version": "0.0.0",
"dependencies": {
"gulp-open": "^2.0.0"
},
"scripts": {
"test": "gulp test"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.25.0",
"babel-preset-es2015": "^6.24.1",
"browser-sync": "~2.9.11",
"browser-sync-spa": "~1.0.3",
"chalk": "~1.1.1",
"del": "~2.0.2",
"eslint-plugin-angular": "~0.12.0",
"estraverse": "~4.1.0",
"gulp": "~3.9.0",
"gulp-angular-filesort": "~1.1.1",
"gulp-angular-templatecache": "~1.8.0",
"gulp-autoprefixer": "~3.0.2",
"gulp-babel": "^7.0.0",
"gulp-clean-css": "~2.0.12",
"gulp-connect": "^5.0.0",
"gulp-eslint": "~1.0.0",
"gulp-filter": "~3.0.1",
"gulp-flatten": "~0.2.0",
"gulp-html-replace": "^1.6.1",
"gulp-htmlmin": "~2.0.0",
"gulp-inject": "~3.0.0",
"gulp-less": "~3.0.3",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "~0.10.0",
"gulp-merge": "^0.1.1",
"gulp-ng-annotate": "~1.1.0",
"gulp-ng-config": "^1.3.1",
"gulp-nginxer": "^1.0.0",
"gulp-order": "^1.1.1",
"gulp-protractor": "~1.0.0",
"gulp-rename": "~1.2.2",
"gulp-replace": "~0.5.4",
"gulp-rev": "~6.0.1",
"gulp-rev-replace": "~0.4.2",
"gulp-size": "~2.0.0",
"gulp-sourcemaps": "~1.6.0",
"gulp-uglify": "~1.4.1",
"gulp-useref": "~1.3.0",
"gulp-util": "~3.0.6",
"gulp-war": "^0.1.4",
"gulp-zip": "^3.2.0",
"gulp.spritesmith": "^6.3.0",
"http-proxy-middleware": "~0.9.0",
"klaw-sync": "^1.1.2",
"lodash": "~4.0.0",
"main-bower-files": "~2.9.0",
"merge-stream": "^1.0.1",
"path": "^0.12.7",
"phantomjs": "~1.9.18",
"uglify-save-license": "~0.4.1",
"wiredep": "~2.2.2"
},
"engines": {
"node": ">=0.10.0"
}
}
gulp/.babelrc
{
"presets": ["es2015"],
"plugins": ["syntax-decorators", "ng-annotate"] // this line is added after seeking for solution
}
gulp/build.js 相关代码
.pipe(jsFilter)
.pipe($.sourcemaps.init())
.pipe($.babel({"presets": [ ["es2015", { "modules": false} ] ], compact: false}))
.pipe($.ngAnnotate())
.pipe($.uglify({
preserveComments: $.uglifySaveLicense
})).on('error', conf.errorHandler('Uglify'))
.pipe($.sourcemaps.write('.'))
.pipe(jsFilter.restore)
还根据此解决方案尝试了.pipe(uglify({compress: {sequences: false, join_vars: false}})).但没有帮助
also tried .pipe(uglify({compress: {sequences: false, join_vars: false}})) as per this solution . but does not help
这是执行gulp build
<--- Last few GCs --->
[15435:0x303a4b0] 401581 ms: Mark-sweep 1399.9 (1459.1) -> 1399.9 (1459.1) MB, 3617.4 / 0.0 ms allocation failure GC in old space requested [15435:0x303a4b0] 405886 ms: Mark-sweep 1399.9 (1459.1) ->
1399.9 (1459.1) MB, 4101.3 / 0.0 ms allocation failure GC in old space requested [15435:0x303a4b0] 409592 ms: Mark-sweep 1399.9 (1459.1) -> 1399.9 (1459.1) MB, 3705.3 / 0.0 ms last resort [15435:0x303a4b0] 413501 ms: Mark-sweep 1399.9 (1459.1) -> 1399.9 (1459.1) MB, 3908.9 / 0.0 ms last resort
<--- JS stacktrace --->
==== JS stack trace =========================================
Security context: 0x1d10fec9cef1 <JSObject>
1: /* anonymous */ [/opt/project/path/node_modules/vinyl-sourcemaps-apply/node_modules/source-map/lib/source-map/source-map-generator.js:~52] [pc=0x355474d0ca02](this=0xc4a489090d9 <JSGlobal Object>,mapping=0xbf1d8defe31 <Object map = 0xa04f5db0ae9>)
2: arguments adaptor frame: 3->1
3: forEach(this=0x11ebaae17be9 <JSArray[466526]>)
5: SourceMapConsumer_ea...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 1: node::Abort() [gulp] 2: 0x128fdfc [gulp] 3: v8::Utils::ReportOOMFailure(char const*, bool) [gulp] 4: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [gulp] 5: v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [gulp] 6: v8::internal::Runtime_AllocateInTargetSpace(int, v8::internal::Object**, v8::internal::Isolate*) [gulp] 7: 0x3554749840dd Aborted
推荐答案
主要原因是uglify插件无法与es6语法一起使用
The main cause was uglify plugin which does not work with es6 syntax so did this
-
npm install babel-cli -g -
bower install gulp-uglify-es --save-dev
在 gulp/build.js
var uglify = require('gulp-uglify-es').default;
在惊恐的任务下面发怒
.pipe($.sourcemaps.init())
.pipe($.babel({"presets": [ ["es2015", { "modules": false} ] ], compact: false}))
.pipe($.ngAnnotate())
.pipe(uglify()).on('error', conf.errorHandler('Uglify'))
.pipe($.sourcemaps.write('.'))
更新 package.json
{
"name": "Project",
"version": "0.0.0",
"dependencies": {
"gulp-open": "^2.0.0"
},
"scripts": {
"test": "gulp test"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.25.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-minify": "^0.2.0",
"chalk": "~1.1.1",
"del": "~2.0.2",
"eslint-plugin-angular": "~0.12.0",
"estraverse": "~4.1.0",
"gulp": "~3.9.0",
"gulp-angular-filesort": "~1.1.1",
"gulp-angular-templatecache": "~1.8.0",
"gulp-autoprefixer": "~3.0.2",
"gulp-babel": "^7.0.0",
"gulp-babel-minify": "^0.2.0",
"gulp-clean-css": "~2.0.12",
"gulp-connect": "^5.0.0",
"gulp-eslint": "~1.0.0",
"gulp-filter": "~3.0.1",
"gulp-flatten": "~0.2.0",
"gulp-html-replace": "^1.6.1",
"gulp-htmlmin": "~2.0.0",
"gulp-inject": "~3.0.0",
"gulp-less": "~3.0.3",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "~0.10.0",
"gulp-merge": "^0.1.1",
"gulp-ng-annotate": "~1.1.0",
"gulp-ng-config": "^1.3.1",
"gulp-order": "^1.1.1",
"gulp-protractor": "~1.0.0",
"gulp-rename": "~1.2.2",
"gulp-replace": "~0.5.4",
"gulp-rev": "~6.0.1",
"gulp-rev-replace": "~0.4.2",
"gulp-size": "~2.0.0",
"gulp-sourcemaps": "~1.6.0",
"gulp-uglify": "~1.4.1",
"gulp-uglify-es": "^0.1.3",
"gulp-useref": "~1.3.0",
"gulp-util": "~3.0.6",
"gulp-war": "^0.1.4",
"gulp-zip": "^3.2.0",
"gulp.spritesmith": "^6.3.0",
"http-proxy-middleware": "~0.9.0",
"klaw-sync": "^1.1.2",
"lodash": "~4.0.0",
"main-bower-files": "~2.9.0",
"merge-stream": "^1.0.1",
"path": "^0.12.7",
"phantomjs": "~1.9.18",
"uglify-es": "^3.0.28",
"uglify-save-license": "~0.4.1",
"wiredep": "~2.2.2"
},
"engines": {
"node": ">=0.10.0"
}
}
这篇关于JavaScript用babel在angular js gulp源映射ngannonate中内存不足的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
