Nuxt.js: Use BabiliPlugin() instead of UglifyJs()

[liyanlong]

version

• nuxt 0.9.9
• element-ui 1.2.3

Error Reason

ERROR in 0.console.js from UglifyJs
Unexpected token name «i», expected punc «;» [0.console.js:2128,11]

So I look up the source file 0.console.js, I found the source file is element-ui/src/utils/merge.js

export default function(target) {
  for (let i = 1, j = arguments.length; i < j; i++) {
    let source = arguments[i] || {};
    for (let prop in source) {
      if (source.hasOwnProperty(prop)) {
        let value = source[prop];
        if (value !== undefined) {
          target[prop] = value;
        }
      }
    }
  }

  return target;
};

I found the let keyword. But webpack.optimize.UglifyJsPlugin unsupport ES6 grammar default.

My solution
change UglifyJsPlugin plugin

const BabiliPlugin = require('babili-webpack-plugin')
module.exports = {
  build: {
    extend (config, {dev}) {
      if(!dev) {
        config.plugins = config.plugins.filter((plugin) => plugin.constructor.name !== 'UglifyJsPlugin')
        config.plugins.push(new BabiliPlugin())
      }
    }
  }
}

@Atinux Do you have any better ideas?

_{This feature request is available on Nuxt.js community (#c335)}

[Atinux]

Hi @liyanlong

I will take a look at it, indeed, it's not the first time that UglifyJS create problems.
Even if I think that element-ui should be transpiled to ES2015, I don't want nuxt.js to have errors because of this.

[liyanlong]

Thanks @Atinux

In development, we can ignore BabiliPlugin()

[apertureless]

Well isn't this rather related to element-ui and a missing transpiled build?
It's actually kind of weird, because in their package.json they specify

"main": "lib/element-ui.common.js",

as the entry. So it seems they have an transpiled version? But your error points to the src/ folder. 🤔

But this would also mean, that element-ui would be unuseable in most vue cli scaffolded projects, as the default webpack production config uses uglifyjs.

[liyanlong]

@apertureless

you are right, it has beean compiled in the [email protected].

[lmj0011]

@liyanlong

Thanks for this solution.

[itsMattShull]

@liyanlong thanks for the solution! It worked great for my build process in CircleCI.

[matthew-dean]

If anyone else comes across this issue, "nuxt build" will fail for many components with an Unexpected token: name error. The code above fixed it. I'd recommend re-opening because the issue, as opened, is correct. UglifyJS will fail with ES6 code.

[liyanlong]

@matthew-dean thanks for your advice.

[christophwolff]

+1

[camilodelvasto]

I ended up using this:

    extend (config, ctx) {     
      if (!ctx.dev) {
        const UglifyJSWebpackPlugin = require('uglifyjs-webpack-plugin')
        config.plugins = config.plugins.filter((plugin) => plugin.constructor.name !== 'UglifyJsPlugin')
        config.plugins.push(new UglifyJSWebpackPlugin())
      }

as I was having issues with BabiliPlugin.

[KyleTryon]

Would this be a solution for this problem? Could someone explain in more detail?
https://github.com/nuxt/nuxt.js/issues/2468

[husayt]

This could be really useful. Last version of uglifyjs 3.3.13 broke a lot of projects, it is less and less reliable. Alternative could be very useful.

[galvez]

@Atinux @clarkdo closable?

[qm3ster]

How about the so called fabiosantoscode/terser ?
It's a fork of uglify-es that is specifically only interested in ES6+ minification.
Babili is still weaker compression + slower processing than uglify.

[Atinux]

Could you open a feature request on CMTY about terser? I am interested to see what the community think of it too

[clarkdo]

Currently, uglifyjs-webpack-plugin is the default plugin od webpack optimization.minimizer.

And it supports terser as well, so you can use build.optimization.minimizer in nuxt.config.js to config terser.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.