問題描述

我開始的一個小項目使用聲明 const 變量的節點模塊(通過 npm 安裝).運行測試這個項目很好，但是執行UglifyJS時browserify失敗了.

A small project I started make use a node module (installed via npm) that declares const variables. Running and testing this project is well, but browserify fails when UglifyJS is executed.

意外標記:關鍵字(const)

Unexpected token: keyword (const)

這是一個通用的 Gulp 文件，我已經成功地將它用于過去的一些其他項目而沒有這個問題(即沒有那個特定的節點模塊).

Here is a generic Gulp file that I have successfully been using for a few other past projects without this issue (i.e. without that particular node module).

'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 來解決此問題，一切都很好.所以我不理解失敗.

I have tried fixing this by replace all const to var in that npm-installed module, and everything is fine. So I do not understand the failure.

const 有什么問題?除非有人使用 IE10，否則所有主流瀏覽器都支持這種語法.

What's wrong with const? Unless someone uses IE10, all major browsers support this syntax.

有沒有辦法解決這個問題而無需更改該節點模塊?

Is there a way to fix this without requiring a change to that node module?

我已經暫時(或永久)用 Butternut 替換了 UglifyJS，并且似乎可以工作.

I have temporarily (or permanently) replaced UglifyJS with Butternut and seem to work.

推薦答案

由于ChrisR 提到，UglifyJS 不支持 ES6完全沒有.

As ChrisR mentionned, UglifyJS does not support ES6 at all.

ES6 需要使用 terser-webpack-plugin (webpack@5會使用這個插件進行丑化)

You need to use terser-webpack-plugin for ES6 (webpack@5 will use this plugin for uglification)

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

然后在你的 plugins 數組中定義

Then define in your plugins array

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

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

來源

這篇關于UglifyJS 拋出意外的標記:keyword (const) with node_modules的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！