92

我开始的一个小项目使用声明变量的节点模块（通过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 的模块中替换所有const来解决这个var问题，一切都很好。所以我不理解失败。

有什么问题const？除非有人使用 IE10，否则所有主流浏览器都支持这种语法。

有没有办法在不需要更改该节点模块的情况下解决这个问题？

更新

我已经暂时（或永久）用Butternut替换了 UglifyJS并且似乎可以工作。

4

7 回答 7

95

正如ChrisR 提到的，UglifyJS 根本不支持 ES6。

你需要为 ES6 使用terser-webpack-plugin（webpack@5 将使用这个插件进行 uglification）

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

然后在你的plugins数组中定义

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

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

资源

于 2018-11-16T10:32:30.933 回答
42

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

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

如果您仍想使用 UglifyJS（例如重用配置），请使用 ES6+ 兼容版本uglify-es。（警告：uglify-es现已废弃。）

正如Ser 提到的，你现在应该使用terser-webpack-plugin.

于 2017-11-22T17:05:23.233 回答
10

我遇到了同样的问题，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”处理

您的其余代码无需更改。

此致！

于 2020-03-24T12:27:33.973 回答
2

我刚刚在重构的 Gulp 项目中遇到了这个问题，由于某种原因，我在使用官方 Terser Gulp 插件时遇到了问题。这个（gulp-terser）没有问题。

于 2019-04-09T02:14:23.367 回答
0

我真的不认为这种方法很好，但就我而言，我需要这样做一次而忘记了这一点，所以我只是去了babel 的网站，在线将 es6 转换为 es5 并替换了输出！

于 2019-09-18T17:25:28.370 回答
0

使用 uglify-es-webpack-plugin 更好

    const UglifyEsPlugin = require('uglify-es-webpack-plugin')



    module.exports = {
    plugins: [
            new UglifyEsPlugin({
                compress:{
                    drop_console: true
                }
            }),
    ] 
    }
于 2019-01-14T17:37:34.110 回答
0

我已经用UglifyJSPHPStormYUI Compressor JS的 GUI 替换了。它现在可以工作了。

于 2019-03-13T10:09:09.723 回答