创建生产资产时来自UglifyJS的Webpack错误 [英] Webpack error from UglifyJS when creating production assets

问题描述

我正在使用Webpack Encore(类似于Webpack)创建资产文件. 创建开发文件时，一切正常，但是运行命令生成用于生产的缩小文件时，我得到了一个错误.

I am using Webpack Encore (similar to Webpack) to create asset files. Everything works well when creating the development files, however when running to command to generate the minified files for production I get an error.

ERROR编译失败，出现1个错误
来自UglifyJS的app.js.
无效的分配[app.js:131,42]
意外字符'`'[app.js:10953,9]

ERROR Failed to compile with 1 errors
app.js from UglifyJS .
Invalid assignment [app.js:131,42]
Unexpected character '`' [app.js:10953,9]

问题似乎是由两个插件引起的:

It seems like the issue is caused by two plugins:

jquery-asScrollable和jquery-asScrollbar 实际上，注释掉以下几行，该过程就成功完成了

jquery-asScrollable and jquery-asScrollbar In fact commenting out the following lines, the process completes successfully

require('jquery-asScrollable');
require('jquery-asScrollbar'); 

我的package.json文件

{
  "devDependencies": {
    "@symfony/webpack-encore": "^0.17.1",
    "animsition": "^4.0.2",
    "bootstrap": "4.0.0-beta.2",
    "jquery": "^3.2.1",
    "jquery-asScrollable": "^0.4.10",
    "jquery-asScrollbar": "^0.5.7",
    "jquery-mousewheel": "^3.1.13",
    "node-sass": "^4.7.2",
    "popper.js": "^1.12.9",
    "sass-loader": "^6.0.6",
    "webpack-notifier": "^1.5.0"
  }
}

更新:

app.js

require('jquery-asScrollable');
require('jquery-asScrollbar');
require('jquery-mousewheel');

对可能是什么问题有任何想法吗?

Any ideas of what the problem might be?

推荐答案

这两个插件都使用ES6语法-在本例中为模板文字. Uglify与ES6的大部分不兼容.您需要将这些插件复制到您的项目代码中(以便它们由Babel进行编译)，或者在Babel编译过程中取消排除它们各自的node_modules文件夹.

The two plugins make use of ES6 syntax - in this case template literals. Uglify is incompatible with large parts of ES6. You need to either copy those plugins to your project code (so they get transpiled by your Babel) or un-exclude their respective node_modules folders in your Babel transpilation process.

查看正在使用的模板文字(以及更多ES6)

See the template literals (and more ES6) being used here (line 90-93):

另一种选择是从插件的dist文件夹中导入/获取插件的缩小版本.

Another option is to import/require the minified versions of the plugins from their dist folders.

示例:

require('node_modules/jquery-asScrollable/dist/jquery-asScrollable.min.js')

这篇关于创建生产资产时来自UglifyJS的Webpack错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！