Webpack error from UglifyJS when creating production assets

问题

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 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 and jquery-asScrollbar In fact commenting out the following lines, the process completes successfully

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

My package.json file

{
  "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"
  }
}

UPDATE:

app.js

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

Any ideas of what the problem might be?

回答1:

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.

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

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

Example:

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

来源：https://stackoverflow.com/questions/48347011/webpack-error-from-uglifyjs-when-creating-production-assets

标签

javascript

jquery

Webpack

webpack-encore