本文介紹了JavaScript在angular js gulp sourcemap ngannonate中用babel堆內存不足的處理方法，對大家解決問題具有一定的參考價值，需要的朋友們下面隨著小編來一起學習吧！
問題描述
限時送ChatGPT賬號..
我在我的 Angular JS 項目中使用 es6 語法，但是在運行 gulp build 時會拋出錯誤，在 github 上搜索，所以但有人說這是由于 gulp uglify 而導致的錯誤，而有人說這是 babel問題和其他說 ng-annonate 問題.
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 -gbower install gulp-uglify-es --save-dev
在gulp/build.js
var uglify = require('gulp-uglify-es').default;
然后在下面寫到 gulp 任務
and wrire belowcinside gulp task
.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在angular js gulp sourcemap ngannonate中用babel堆內存不足的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！