UglifyJS抛出意外的令牌:关键字(const)和node_modules

Question

我开始的一个小项目使用一个声明变量的节点模块(通过npm安装)const.运行和测试这个项目很好,但是当执行UglifyJS时,browserify失败了.

意外的标记:关键字(const)

这是一个通用的Gulp文件,我已经成功地用于其他一些过去没有这个问题的项目(即没有那个特定的节点模块).

gulpfile.js

'use strict';

const browserify = require('browserify');
const gulp = require('gulp');
const source = require('vinyl-source-stream');
const derequire = require('gulp-derequire');
const buffer = require('vinyl-buffer');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const gutil = require('gulp-util');
const path = require('path');
const pkg = require('./package');
const upperCamelCase = require('uppercamelcase');

const SRC_PATH = path.dirname(pkg.main);
const DIST_PATH = path.dirname(pkg.browser);

const INPUT_FILE = path.basename(pkg.main);
const OUTPUT_FILE = path.basename(pkg.browser);

const MODULE_NAME = upperCamelCase(pkg.name);


gulp.task('default', () => {
  // set up the browserify instance on a task basis
  var b = browserify({
    entries: INPUT_FILE,
    basedir: SRC_PATH,
    transform: ['babelify'],
    standalone: MODULE_NAME,
    debug: true
  });

  return b.bundle()
    .pipe(source(OUTPUT_FILE))
    .pipe(buffer())
    .pipe(derequire())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .on('error', gutil.log)
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(DIST_PATH))
  ;
});

我已经尝试通过在npm安装的模块中替换all const来解决这个问题var,一切都很好.所以我不明白失败.

怎么了const？除非有人使用IE10,否则所有主流浏览器都支持此语法.

有没有办法解决这个问题,而无需更改该节点模块？

更新

我暂时(或永久)用Butternut取代了UglifyJS,似乎有效.

Answer 1

2018年11月更新:

使用terser-webpack-plugin for ES6(webpack @ 5将使用此插件进行uglification)

npm install terser-webpack-plugin --save-dev

然后在你的plugins数组中定义

const TerserPlugin = require('terser-webpack-plugin')

  new TerserPlugin({
    parallel: true,
    terserOptions: {
      ecma: 6,
    },
  }),

资源

Answer 2

UglifyJS不支持es6.const是一个es6声明,所以它会抛出一个错误.

有点奇怪的是,您使用的软件包不会将其文件转换为es5以便在任何地方使用.

如果您仍想使用UglifyJS(例如重新使用配置),请使用ES6 +兼容版本uglify-es.(警告:uglify-es在现在放弃了.)

正如塞尔提到的,你现在应该使用terser-webpack-plugin.

Answer 3

我遇到了同样的问题，gulp 插件gulp-uglify-es解决了这个问题。

我认为这是最简单的决定。

只需安装：

npm i gulp-uglify-es --save-dev

之后在您的代码中只更改这一行

const uglify = require('gulp-uglify');

对此：

const uglify = require('gulp-uglify-es').default;

NB 属性.default是至关重要的，否则你会遇到 uglify 不是函数的错误。

如上所述，作为 ES6 const运算符的一部分，只能由更现代的 es6 gulp 插件“gulp-uglify-es”处理

其余代码无需更改。

此致！