ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript – 如何使用gulp-uglify缩小ES6函数?

2019-10-04 00:35:14  阅读:270  来源: 互联网

标签:javascript ecmascript-6 node-js gulp gulp-uglify


当我运行gulp时,我收到以下错误:

[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 }

违规行包含箭头功能:

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

我知道我可以用以下内容替换它来弥补缩小错误:

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

如何在包含ES6功能的代码上运行gulp而不会导致缩小失败?

解决方法:

你可以利用gulp-babel ……

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())
    // [...]
});

这将在您的管道中提前转换您的es6,并在您缩小时作为广泛支持的“普通”JavaScript生成.

值得注意的是 – 正如评论中指出的那样 – 核心babel编译器在此插件中作为peer dependency发布.如果没有通过您的仓库中的另一个dep下拉核心库,请确保在您的末端安装了该库.

在gulp-babel的peer dependency中,作者正在指定@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

标签:javascript,ecmascript-6,node-js,gulp,gulp-uglify
来源: https://codeday.me/bug/20191003/1851349.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有