如何使用gulp-uglify来缩小ES6的功能？ [英] How to minify ES6 functions with gulp-uglify?

问题描述

当我运行gulp时，出现以下错误：

  [12:54:14] {[GulpUglifyError：unable to （b）[b] [b] [b] [b] [b] [b] [b] [b] [b] bundle.js'，
行：3284，
 col：46，
 pos：126739}，
插件：'gulp-uglify'，
 fileName：'C ：\\\\\servers\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ $ b  

违规行包含一个箭头函数：

  var zeroCount = numberArray.filter（v => v === 0）.length 
  

我知道我可以用以下代码来弥补缩小错误：

  var zeroCount = numberArray .filter（function（v）{return v === 0;}）。长度
  

我用代码contai运行gulp你可以利用 com / package / gulp-babelrel =noreferrer> gulp-babel 等等......

 让gulp = require（'gulp'）; 
让babel = require（'gulp-babel'）; 
 let uglify = require（'gulp-uglify'）; 
 
 gulp.task（'minify'，（）=> {
 return gulp.src（'src / ** / *。js'）
 .pipe（babel （{
 presets：['es2015'] 
}））
 .pipe（uglify（））
 // [...] 
}）; 
  

这将会在您的早期阶段将您的es6转换为流水线，当您缩小时。

---

注意事项核心babel编译器在这个插件中作为 peer dependency 出现。如果核心库没有通过repo中的另一个dep被拉下，请确保将其安装在您的终端上。

查看 peer dependency 中 gulp-babel 作者指定 @ babel / core （7.x）。尽管稍微老一点的 babel-core （6.x）也可以。我的猜测是作者（两个项目都是一样的）正处于重组模块命名的阶段。无论哪种方式，两个npm安装端点都指向 https://github.com/ babel / babel / tree / master / packages / babel-core ，所以你可以在以下任何一种情况下使用：

  npm install babel-core --save-dev 
  

或

  npm install @ babel / core --save-dev 
  

When I run gulp I get the following error:

[12:54:14] { [GulpUglifyError: unable to minify JavaScript]
cause:
{ [SyntaxError: Unexpected token: operator (>)]
 message: 'Unexpected token: operator (>)',
 filename: 'bundle.js',
 line: 3284,
 col: 46,
 pos: 126739 },
plugin: 'gulp-uglify',
fileName: 'C:\\servers\\vagrant\\workspace\\awesome\\web\\tool\\bundle.js',
showStack: false }

The offending line contains an arrow function:

var zeroCount = numberArray.filter(v => v === 0).length

I know I can replace it with the following to remedy the minification error:

var zeroCount = numberArray.filter(function(v) {return v === 0;}).length

How can I run gulp on code containing ES6 features without causing minification to fail?

解决方案

You can leverage gulp-babel as such...

let gulp = require('gulp');
let babel = require('gulp-babel');
let uglify = require('gulp-uglify');

gulp.task('minify', () => {
  return gulp.src('src/**/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(uglify())
    // [...]
});

This will transpile your es6 early in the pipeline and churn out as widely supported "plain" javascript by the time you minify.

---

May be important to note - as pointed out in comments - the core babel compiler ships as a peer dependency in this plugin. In case the core lib is not being pulled down via another dep in your repo, ensure this is installed on your end.

Looking at the peer dependency in gulp-babel the author is specifying @babel/core (7.x). Though, the slightly older babel-core (6.x) will work as well. My guess is the author (who is the same for both projects) is in the midsts of reorganizing their module naming. Either way, both npm installation endpoints point to https://github.com/babel/babel/tree/master/packages/babel-core, so you'll be fine with either of the following...

npm install babel-core --save-dev

or

npm install @babel/core --save-dev

这篇关于如何使用gulp-uglify来缩小ES6的功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！