JavaScript在angular js gulp sourcemap ngannonate中用babel堆

问题描述

我在我的 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

1. npm install babel-cli -g

2. bower 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模板网！