意外的标记：来自 UglifyJs 的运算符 (>)

Question

我有 2 个 Vue-Cli webpack 项目（ClientApp 和 Lib）。 Lib 是我的组件库（与其他项目共享）

问题

当我构建项目 ClientApp npm run build 时，出现以下错误：

ERROR in static/js/app.d08a24ce0e8d0438ce68.js from UglifyJs
Unexpected token: operator (>) [C:/.../Lib/src/tools/escape-key.js:3,0][static/js/app.d08a24ce0e8d0438ce68.js:17468,38]

问题

似乎错误来自文件 escape-key.js 中的箭头函数。这是 ES6 语法，UglifyJS 无法解析它。在 Uglify 之前，Babel 不应该先走吗？请注意，这适用于 *.vue 个文件。

项目结构

ClientApp
   | - build
   | - config
   | - src
       | - App.Vue // import EscapeKey from '~lib/tools/escape-key';



Lib
  | -src
     | - tools
         | - escape-key.js

ClientApp 的 webpack.base.conf.js 文件

注意 Lib 有一个别名。

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      '~lib': path.join(__dirname, '../../lib/src'),
    }
  },

如果需要，请随时询问更多详情。

Answer 1

更改我的 babel-loader 配置后，它起作用了。

Babel 加载器配置

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [path.join(__dirname, '../../Lib/src'), resolve('src'), resolve('test')]
}

Answer 2

您使用的 uglify 版本可能不支持 ES6。

https://github.com/mishoo/UglifyJS2/tree/harmony 是目前的 es6 版本

如果你想使用 webpack plugin，一定要注意关于 es6 的安装部分

Important! The plugin has a peer dependency to uglify-js, so in order to use the plugin, also uglify-js has to be installed. The currently (2017/1/25) available uglify-js npm packages; however, do not support minification of ES6 code. In order to support ES6, an ES6-capable, a.k.a. harmony, version of UglifyJS has to be provided.

If your minification target is ES6:

yarn add git://github.com/mishoo/UglifyJS2#harmony-v2.8.22 --dev

Answer 3

添加

"uglifyjs-webpack-plugin": "v1.0.0-beta.1",

到您的开发依赖项并更新您的 webpack.config.js 文件以明确使用此版本：

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyJSPlugin()
  ]
}

uglifyjs-webpack-plugin 最新稳定版本 (v0.4.6) 使用旧版本 uglify-js 而不是能够转译 ES6 的 uglify-es。此依赖项已在 1.0.0-beta.1 版本中更新。

https://github.com/webpack-contrib/uglifyjs-webpack-plugin/releases/tag/v1.0.0-beta.1

Answer 4

这解决了我的问题。我安装了 uglifyjs-webpack-plugin

npm install uglifyjs-webpack-plugin --save-dev

然后将其添加到我的 webpack.config

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyJSPlugin()
  ]
}

意外的标记：来自 UglifyJs 的运算符 (>)

Unexpected token: operator (>) from UglifyJs

webpack

vue-loader

vuejs2

babel-loader

问题

问题

项目结构

ClientApp 的 webpack.base.conf.js 文件

Babel 加载器配置