Configure targets.browser for babel-preset-env

[sudo-suhas]

Configures babel-preset-env to target browsers using browserslist.

babel-preset-env does not yet consume the browserslist config in package.json. There is a PR open for adding this support. We can avoid the duplicated config(package.json, .babelrc) once this PR is merged into babel-preset-env.

This issue was discussed here - vuejs-templates/webpack#762

[LinusBorg]

Thanks!

[addyosmani]

Thank you!

[yavorsky]

Nice!
We hope to merge browserslist config support ASAP, but it will be available only with 2.0 version.

[sudo-suhas]

Could we please merge this in? Are there any changes required?

[yyx990803]

The problem is this dynamic config may break minification because currently the uglify plugin shipped in webpack 2 doesn't support ES6+.

It seems the standalone uglify webpack plugin just got a 1.0-beta release that uses the ES-compatible version of uglify, but I'm not sure if it works with webpack 2.

• If it does work with webpack 2, we can use that instead of the built-in plugin from webpack 2 (ideally wait until it's stable 1.0)

• If it doesn't, then we might want to upgrade to webpack 3, but that involves making sure everything is working correctly with webpack 3.

[sudo-suhas]

We could either set targets.uglify to true in .babelrc or switch out UglifyJsPlugin with babili-webpack-plugin in webpack.prod.conf.js.

[sudo-suhas]

With the browserlist config as ["> 5%", "last 2 versions", "not ie <= 8"], babel-preset-env produces the following DEBUG output:

Using targets:
{
  "chrome": "58",
  "android": "4.4.3",
  "edge": "14",
  "firefox": "53",
  "ie": "10",
  "ios": "10",
  "safari": "10"
}

Modules transform: false

Using plugins:
  check-es2015-constants {"android":"4.4.3","ie":"10"}
  transform-es2015-arrow-functions {"android":"4.4.3","ie":"10"}
  transform-es2015-block-scoped-functions {"android":"4.4.3","ie":"10"}
  transform-es2015-block-scoping {"android":"4.4.3","ie":"10"}
  transform-es2015-classes {"android":"4.4.3","ie":"10"}
  transform-es2015-computed-properties {"android":"4.4.3","ie":"10"}
  transform-es2015-destructuring {"android":"4.4.3","edge":"14","ie":"10"}
  transform-es2015-duplicate-keys {"android":"4.4.3","ie":"10"}
  transform-es2015-for-of {"android":"4.4.3","edge":"14","ie":"10"}
  transform-es2015-function-name {"android":"4.4.3","edge":"14","ie":"10"}
  transform-es2015-literals {"android":"4.4.3","ie":"10"}
  transform-es2015-object-super {"android":"4.4.3","ie":"10"}
  transform-es2015-parameters {"android":"4.4.3","ie":"10"}
  transform-es2015-shorthand-properties {"android":"4.4.3","ie":"10"}
  transform-es2015-spread {"android":"4.4.3","ie":"10"}
  transform-es2015-sticky-regex {"android":"4.4.3","ie":"10"}
  transform-es2015-template-literals {"android":"4.4.3","ie":"10"}
  transform-es2015-typeof-symbol {"android":"4.4.3","ie":"10"}
  transform-es2015-unicode-regex {"android":"4.4.3","ie":"10"}
  transform-regenerator {"android":"4.4.3","ie":"10"}
  transform-exponentiation-operator {"android":"4.4.3","ie":"10","ios":"10","safari":"10"}
  transform-async-to-generator {"android":"4.4.3","edge":"14","ie":"10","ios":"10","safari":"10"}
  syntax-trailing-function-commas {"android":"4.4.3","ie":"10"}

This works just fine with the default webpack uglify plugin. But this could change in the future as the targeted browsers could change.

Just for testing, I changed my target.browsers to ["last 2 Chrome versions", "last 2 Firefox versions"]. This did break uglify.

I tried out babel-webpack-plugin for this and for some reason, it produces bigger files than uglify:

# Uglify
static/js/10.e1b73ccb61b1561f8c0f.js     556 kB      10  [emitted]  [big]  highlight

# babili
static/js/10.9b42c8217d1e3e044484.js     686 kB      10  [emitted]  [big]  highlight

I tried playing around with the config options but couldn't reduce the generated file size.

Then I tried out uglifyjs-webpack-plugin mentioned by Evan You and that worked fine.

Also, correct me if I am wrong here @yavorsky but setting "uglify": true is a workaround and probably not the ideal solution?

[addyosmani]

@sudo-suhas did this change land upstream? I see some specific concerns from Evan above but imagine that we'll want to stay consistent with the build pipeline changes in the Webpack template regardless.

[sudo-suhas]

Yes, it was merged in the webpack template - vuejs-templates/webpack#763

[addyosmani]

Thanks. With that in mind, let's land this one.

[sudo-suhas]

Hopefully, when this is upgraded to webpack 3, we can also setup UglifyJsPlugin