bug #545 Set useBuiltIns to false by default and allow to set core-js…

… version (Lyrkan)

This PR was merged into the master branch.

Discussion
----------

Set useBuiltIns to false by default and allow to set core-js version

While working on #544 I noticed that the latest version of `@babel/preset-env` displayed a warning (which luckily made [one of the tests](https://travis-ci.org/symfony/webpack-encore/jobs/509655320) fail):

```
WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version.
Currently, we assume version 2.x when no version is passed.
Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section.
If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3
```

This is related to the `core-js` 3 update that happened recently (see babel/babel#7646).

As explained in parcel-bundler/parcel#2819 (comment) the issue is that users are normally supposed to add `core-js` in their root `package.json` when setting `useBuiltIns` (which is currently already set by Encore to `entry` by default).

This is a problem for us since it means that:
* we are requiring users to add `core-js` to their project by default (or manually setting `useBuiltIns` to `false`)
* if they do they'll still have a warning because the new `corejs` option of `@babel/preset-env` won't be set (we can't do that because we won't know which version they choose to install).

For now I suggest that we set `useBuiltIns` to `false` by default and add a new option to `Encore.configureBabel()` that allows to set the `corejs` option.

Commits
-------

85896ef Set useBuiltIns to false by default and allow to set corejs version

index.js

@@ -780,6 +780,11 @@ class Encore {
      *      // automatically import polyfills where they
      *      // are needed
      *      useBuiltIns: 'usage'
+     *
+     *      // if you set useBuiltIns you also have to add
+     *      // core-js to your project using Yarn or npm and
+     *      // inform Babel of the version it will use.
+     *      corejs: 3
      * });
      *
      * Supported options:
@@ -793,14 +798,18 @@ class Encore {
      *              If set that option will include the given Node modules to
      *              the files that are processed by Babel. Cannot be used if
      *              the "exclude" option is also set.
-     *      * {'usage'|'entry'|false} useBuiltIns (default='entry')
+     *      * {'usage'|'entry'|false} useBuiltIns (default=false)
      *              Set the "useBuiltIns" option of @babel/preset-env that changes
      *              how it handles polyfills (https://babeljs.io/docs/en/babel-preset-env#usebuiltins)
-     *              Using it with 'entry' will require you to import @babel/polyfill
+     *              Using it with 'entry' will require you to import core-js
      *              once in your whole app and will result in that import being replaced
      *              by individual polyfills. Using it with 'usage' will try to
      *              automatically detect which polyfills are needed for each file and
      *              add them accordingly.
+     *      * {number|string} corejs (default=not set)
+     *              Set the "corejs" option of @babel/preset-env.
+     *              It should contain the version of core-js you added to your project
+     *              if useBuiltIns isn't set to false.
      *
      * @param {function} callback
      * @param {object} encoreOptions

lib/WebpackConfig.js

@@ -83,7 +83,8 @@ class WebpackConfig {
         };
         this.babelOptions = {
             exclude: /(node_modules|bower_components)/,
-            useBuiltIns: 'entry',
+            useBuiltIns: false,
+            corejs: null,
         };
 
         // Features/Loaders options callbacks

lib/loaders/babel.js

@@ -31,17 +31,20 @@ module.exports = {
         // configure babel (unless the user is specifying .babelrc)
         // todo - add a sanity check for their babelrc contents
         if (!webpackConfig.doesBabelRcFileExist()) {
+            const presetEnvOptions = {
+                // modules don't need to be transformed - webpack will parse
+                // the modules for us. This is a performance improvement
+                // https://babeljs.io/docs/en/babel-preset-env#modules
+                modules: false,
+                targets: {},
+                forceAllTransforms: webpackConfig.isProduction(),
+                useBuiltIns: webpackConfig.babelOptions.useBuiltIns,
+                corejs: webpackConfig.babelOptions.corejs,
+            };
+
             Object.assign(babelConfig, {
                 presets: [
-                    ['@babel/preset-env', {
-                        // modules don't need to be transformed - webpack will parse
-                        // the modules for us. This is a performance improvement
-                        // https://babeljs.io/docs/en/babel-preset-env#modules
-                        modules: false,
-                        targets: {},
-                        forceAllTransforms: webpackConfig.isProduction(),
-                        useBuiltIns: webpackConfig.babelOptions.useBuiltIns,
-                    }]
+                    ['@babel/preset-env', presetEnvOptions]
                 ],
                 plugins: ['@babel/plugin-syntax-dynamic-import']
             });

package.json

@@ -25,9 +25,9 @@
   },
   "homepage": "https://github.com/symfony/webpack-encore",
   "dependencies": {
-    "@babel/core": "^7.0.0",
+    "@babel/core": "^7.4.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-env": "^7.4.0",
     "assets-webpack-plugin": "^3.9.7",
     "babel-loader": "^8.0.0",
     "chalk": "^2.4.1",
@@ -57,7 +57,6 @@
     "yargs-parser": "^12.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
     "@babel/plugin-transform-react-jsx": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "autoprefixer": "^8.5.0",

test/config-generator.js

@@ -856,7 +856,7 @@ describe('The config-generator function', () => {
 
             const babelLoader = jsRule.use.find(loader => loader.loader === 'babel-loader');
             const babelEnvPreset = babelLoader.options.presets.find(([name]) => name === '@babel/preset-env');
-            expect(babelEnvPreset[1].useBuiltIns).to.equal('entry');
+            expect(babelEnvPreset[1].useBuiltIns).to.equal(false);
         });
 
         it('with configureBabel() and a different exclude rule', () => {
@@ -897,7 +897,8 @@ describe('The config-generator function', () => {
             config.publicPath = '/public-path';
             config.addEntry('main', './main');
             config.configureBabel(() => { }, {
-                useBuiltIns: 'usage'
+                useBuiltIns: 'usage',
+                corejs: 3,
             });
 
             const actualConfig = configGenerator(config);
@@ -906,6 +907,7 @@ describe('The config-generator function', () => {
             const babelLoader = jsRule.use.find(loader => loader.loader === 'babel-loader');
             const babelEnvPreset = babelLoader.options.presets.find(([name]) => name === '@babel/preset-env');
             expect(babelEnvPreset[1].useBuiltIns).to.equal('usage');
+            expect(babelEnvPreset[1].corejs).to.equal(3);
         });
     });