webpack+UglifyJs build fail because of picking of the es6 version of mingo

[ericfong]

After mingo package.json added "module": "index.js", webpack seem will pick index.js as the entry point and which is es6.

However, the UglifyJs will complain because it is not es6 ready???

ERROR in app-b0821b8c5ea25b9a55ff.js from UglifyJs
Unexpected token operator «=», expected punc «,» [app-b0821b8c5ea25b9a55ff.js:9081,28]

After I deep into line 9081, I find that UglifyJs complain about default value for arg = null

function each (obj, fn, ctx = null) {

I tried using babili-webpack-plugin instead of uglifyjs-webpack-plugin, which take me forever to compile my code.

My webpack setting

    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: [
            [
              'env',
              {
                targets: {
                  browsers: ['>1%', 'last 2 ChromeAndroid versions'],
                  uglify: true,
                },
              },
            ],
          ],
        },
      },

I also have tried include all node_modules into my babel transpile but some other packages will fail to transpile because some devDependencies babel plugins have not be installed.

I am not expert on importing or exporting es6 modules. And seems webpack is not prefect to choose es5 or es6 versions. Not sure how to enforce es5 version for browser and es6 version for node.

Any suggestion on how to use mingo with webpack?

Thanks

• Not yet try rollup, but that require me to convert all webpack configs...

[kofrasa]

Thanks for the report @ericfong

Can you please confirm if you get the same issues using the previous version 1.3.3.

I want to confirm that this is due to porting to es6 and not because of moving the index.js to the project root since the contents have barely changed.

[kofrasa]

There is tutorial here on how to use webpack with es6

http://ccoenraets.github.io/es6-tutorial/setup-webpack/

I think what needs to happen is that, you translate the files first with babel before passing it to uglify.

[ericfong]

Thanks for your tutorial.

I confirm that version 1.2.0 success version 1.3.0 fail

I think the problem come from my webpack setting

  exclude: /(node_modules|bower_components)/,

I am expecting that npm modules will export an es5 friendly release. (I am not sure that is a norm or not)

If I remove the exclude setting, babel will re-compile all node_modules. And some node_modules' .babelrc depend on some plugins that not installed

So far, I need to either manually blacklist or whitelist node_modules to transpile (which is too much work).

Do a little study about that and found https://github.com/rollup/rollup/wiki/pkg.module#wait-it-just-means-import-and-export--not-other-future-javascript-features

Seems rollup suggest that when publishing es6 code, means transpile all es6 to es5 except import export

Following babel-preset-env setting may help:

  "env": {
    "module": {
      "presets": [["env", { "targets": { "browsers": "> 1%" }, "useBuiltIns": true, "modules": false }]],
      "plugins": [...],
    },
    "main": {
      "presets": [["env", { "targets": { "uglify": true }, "useBuiltIns": true }]],
      "plugins": [...],
    },
  },

[kofrasa]

Sounds like you found a nice workaround. I use rollup for mingo and the distribution provides a compiled UMD-style version in dist/mingo.js.

The approach you described appears to be the simplest. Library authors should be vending the es5 compiled versions along with the es6 sources so excluding node_modules and setting modules: false should work fine. I assume that will load the file at the main entry point which is the es5 version. https://github.com/kofrasa/mingo/blob/master/package.json#L5

See the file node_modules/mingo/dist/mingo.js in your project environment.

[ericfong]

I finally solved by installing webpack-babel-env-deps

which will include mingo into babel transpile process

Thanks

[marbemac]

For those using webpack, you can just toss this into your setup, where config is your webpack configuration object. I'm using lodash here, but you get the idea!

_.set(
  config,
  'resolve.alias',
  _.merge({}, _.get(config, 'resolve.alias', {}), {
    mingo: 'mingo/dist/mingo.min.js',
  })
);