JavaScript angular js 中的堆内存不足 gulp sourcemap ngannonate with babel
JavaScript heap out of memory in angular js gulp sourcemap ngannonate with babel
我在我的 angular JS 项目中使用 es6 语法，但是当 运行 gulp build 时它会抛出错误，搜索 github 和 So 但有人说这是错误由于 gulp uglify 而有人说这是 babel 问题而其他人说 ng-annonate 问题。
ubuntu 14.04
节点-v : 8.4.0
npm -v : 5.3.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)
也按照 this solution 尝试了 .pipe(uglify({compress: {sequences: false, join_vars: false}}))。但没有帮助
这里是执行时的日志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
这可能只是因为您的应用程序需要大量内存才能构建； node.js 内存分配有 1.4Gb 的硬限制。有关如何增加此限制的信息，请参阅 。让我们知道这是否有帮助！
主要原因是不能使用 es6 语法的 uglify 插件也是如此
npm install babel-cli -g bower install gulp-uglify-es --save-dev
在gulp/build.js
var uglify = require('gulp-uglify-es').default;
并在 gulp 任务
下方写入
.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"
}
}
我挣扎了一段时间后，通过将所有 ^ 替换为 ~ 中的所有依赖关系，设法解决了这个问题 package.json 文件.
替换
"dependencies": {
"@agm/core": "^1.0.0-beta.5",
"@angular/animations": "^7.2.0",
"@angular/common": "^7.2.0",
"@angular/compiler": "^7.2.0",
"@angular/core": "^7.2.0",
"@angular/forms": "^7.2.0",
...
},
到
"dependencies": {
"@agm/core": "~1.0.0-beta.5",
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
...
},
我认为这个问题是因为不同版本的库之间存在冲突。
我在我的 angular JS 项目中使用 es6 语法，但是当 运行 gulp build 时它会抛出错误，搜索 github 和 So 但有人说这是错误由于 gulp uglify 而有人说这是 babel 问题而其他人说 ng-annonate 问题。
ubuntu 14.04
节点-v : 8.4.0
npm -v : 5.3.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)
也按照 this solution 尝试了 .pipe(uglify({compress: {sequences: false, join_vars: false}}))。但没有帮助
这里是执行时的日志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
这可能只是因为您的应用程序需要大量内存才能构建； node.js 内存分配有 1.4Gb 的硬限制。有关如何增加此限制的信息，请参阅
主要原因是不能使用 es6 语法的 uglify 插件也是如此
npm install babel-cli -gbower install gulp-uglify-es --save-dev在gulp/build.js
中添加插件和更新代码
var uglify = require('gulp-uglify-es').default;
并在 gulp 任务
下方写入 .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"
}
}
我挣扎了一段时间后，通过将所有 ^ 替换为 ~ 中的所有依赖关系，设法解决了这个问题 package.json 文件.
替换
"dependencies": {
"@agm/core": "^1.0.0-beta.5",
"@angular/animations": "^7.2.0",
"@angular/common": "^7.2.0",
"@angular/compiler": "^7.2.0",
"@angular/core": "^7.2.0",
"@angular/forms": "^7.2.0",
...
},
到
"dependencies": {
"@agm/core": "~1.0.0-beta.5",
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
...
},
我认为这个问题是因为不同版本的库之间存在冲突。