Use babel-preset-env instead of deprecated babel-preset-es201X plugins

Closes #375

CHANGES.md

@@ -3,8 +3,13 @@
 - Removed hooking of React, Preact and Inferno `render()` functions in quick commands, as this won't work with ES modules builds (which are used by default in Webpack v3). This affected the current version of Preact at the time of writing.
   - If you're manually using `render()` with quick commands, you must now handle providing the target DOM node too - `document.getElementById('app')` is available in the default HTML template.
 
+## Added
+
+- Added [`babel.env` config](https://github.com/insin/nwb/blob/master/docs/Configuration.md#env-object) to pass additional [options for `babel-preset-env`](https://github.com/babel/babel-preset-env#options).
+
 ## Changed
 
+- Now using `babel-preset-env` instead of deprecated `babel-preset-es201X` presets [[#375](https://github.com/insin/nwb/issues/375)]
 - Use `beautify: true` for `webpack.debug` output so code split bundles are readable.
 
 ## Dependencies

docs/Configuration.md

@@ -72,6 +72,7 @@ The configuration object can include the following properties:
 - [Babel Configuration](#babel-configuration)
   - [`babel`](#babel-object)
   - [`babel.cherryPick`](#cherrypick-string--arraystring) - enable cherry-picking for destructured `import` statements
+  - [`babel.env`](#env-object) - additional configuration for `babel-preset-env`
   - [`babel.loose`](#loose-boolean) - enable loose mode for Babel plugins which support it
   - [`babel.plugins`](#plugins-string--array) - extra Babel plugins to be used
   - [`babel.presets`](#presets-string--array) - extra Babel presets to be used
@@ -186,6 +187,10 @@ module.exports = {
 
 This is implemented using [babel-plugin-lodash](https://github.com/lodash/babel-plugin-lodash) - please check its issues for compatibility problems with modules you're using `cherryPick` with and report any new ones you find.
 
+##### `env`: `Object`
+
+Additional [options for `babel-preset-env`](https://github.com/babel/babel-preset-env#options) - nwb uses `babel-preset-env` to transpile ECMAScript features which aren't natively available in browsers yet.
+
 ##### `loose`: `Boolean`
 
 Some Babel plugins have a [loose mode](http://www.2ality.com/2015/12/babel6-loose-mode.html) in which they output simpler, potentially faster code rather than following the semantics of the ES6 spec closely.

docs/Features.md

@@ -3,7 +3,7 @@
 - **A toolkit, not a boilerplate.**
 - Uses [Webpack](https://webpack.js.org/), [Babel](https://babeljs.io/) and [Karma](https://karma-runner.github.io/).
 - Provides tooling for [React](https://facebook.github.io/react/) apps and components, [Preact](https://preactjs.com/) apps, [Inferno](https://infernojs.org/) apps, and vanilla JS web apps and npm modules.
-- Use the latest JavaScript features (ES2015, ES2016, ES2017) and JSX.
+- Use the latest JavaScript features from ES2015-ES2017, and JSX.
 - Use future JavaScript features like object spreading now; [TC39](https://exploringjs.com/es2016-es2017/ch_tc39-process.html) Stage 2 and above features are enabled by default.
 - Default polyfills and configuration allow use of [`Promise`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) (with [rejection tracking](https://www.2ality.com/2016/04/unhandled-rejections.html) enabled), [`fetch()`](https://developer.mozilla.org/en/docs/Web/API/Fetch_API), [`async`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)/[`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await), [generators](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/function*) and [`Object.assign()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) in any browser.
 - Import CSS (and font resources) and images to be managed by Webpack.

docs/guides/QuickDevelopment.md

@@ -171,7 +171,7 @@ Create a build of a React project which uses Inferno or Preact as the runtime vi
 
 ### Zero Configuration Setup
 
-- Write JavaScript with ES6/ES2015-ES2017 features and JSX, transpiled down to ES5.
+- Write JavaScript with ES2015-ES2017 features and JSX, transpiled down to ES5.
 - Use new JavaScript features at Stage 2 and above in the TC39 process:
   - [`async`/`await` syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function), for writing async code in a synchronous way.
   - Class properties, for avoiding boilerplate when writing ES2015 classes.

docs/guides/ReactApps.md

@@ -145,7 +145,7 @@ nwb generates a comprehensive default configuration for creating React apps usin
 
 Without any configuration, the main features you get are:
 
-- Write JavaScript with ES6/ES2015-ES2017 features and JSX, transpiled down to ES5.
+- Write JavaScript with ES2015-ES2017 features and JSX, transpiled down to ES5.
 - Use new JavaScript features which are at Stage 2 and above in the TC39 process:
   - `async`/`await` syntax, for writing async code in a synchronous way.
   - Class properties, for avoiding boilerplate when writing ES6 classes.

package.json

@@ -63,9 +63,7 @@
     "babel-plugin-transform-react-remove-prop-types": "0.4.8",
     "babel-plugin-transform-runtime": "6.23.0",
     "babel-polyfill": "6.26.0",
-    "babel-preset-es2015": "6.24.1",
-    "babel-preset-es2016": "6.24.1",
-    "babel-preset-es2017": "6.24.1",
+    "babel-preset-env": "1.6.0",
     "babel-preset-react": "6.24.1",
     "babel-preset-stage-0": "6.24.1",
     "babel-preset-stage-1": "6.24.1",
@@ -113,7 +111,6 @@
     "webpack-hot-middleware": "2.18.2"
   },
   "devDependencies": {
-    "babel-preset-env": "1.6.0",
     "babel-preset-flow": "6.23.0",
     "cross-env": "5.0.5",
     "eslint-config-jonnybuchanan": "5.0.0",

src/createBabelConfig.js

@@ -24,6 +24,7 @@ type BuildOptions = {
 
 type UserOptions = {
   cherryPick?: string | string[],
+  env?: Object,
   loose?: boolean,
   plugins?: BabelPluginConfig[],
   presets?: BabelPluginConfig[],
@@ -53,6 +54,7 @@ export default function createBabelConfig(
 
   let {
     cherryPick,
+    env = {},
     loose,
     plugins: userPlugins = [],
     presets: userPresets,
@@ -70,16 +72,9 @@ export default function createBabelConfig(
     loose = true
   }
 
-  // ES2015 and ES2016 presets
   presets.push(
-    [require.resolve('babel-preset-es2015'), {loose, modules}],
-    require.resolve('babel-preset-es2016'),
+    [require.resolve('babel-preset-env'), {loose, modules, ...env}]
   )
-  // Babel 6's stage-3 preset contains all the es2017 plugins, so only use the
-  // es2017 preset if the user has disabled use of a stage preset.
-  if (userStage === false) {
-    presets.push(require.resolve('babel-preset-es2017'))
-  }
 
   // Additional build presets
   if (Array.isArray(buildPresets)) {

tests/createBabelConfig-test.js

@@ -20,8 +20,7 @@ describe('createBabelConfig()', () => {
     it('generates default Babel config', () => {
       expect(createBabelConfig()).toEqual({
         presets: [
-          [require.resolve('babel-preset-es2015'), {loose: true, modules: false}],
-          require.resolve('babel-preset-es2016'),
+          [require.resolve('babel-preset-env'), {loose: true, modules: false}],
           require.resolve('babel-preset-stage-2'),
         ],
         plugins: [
@@ -40,8 +39,7 @@ describe('createBabelConfig()', () => {
         stage: 0,
       })).toEqual({
         presets: [
-          [require.resolve('babel-preset-es2015'), {loose: true, modules: 'commonjs'}],
-          require.resolve('babel-preset-es2016'),
+          [require.resolve('babel-preset-env'), {loose: true, modules: 'commonjs'}],
           require.resolve('babel-preset-stage-0'),
         ],
         plugins: [
@@ -58,9 +56,7 @@ describe('createBabelConfig()', () => {
         stage: false,
       })).toEqual({
         presets: [
-          [require.resolve('babel-preset-es2015'), {loose: true, modules: false}],
-          require.resolve('babel-preset-es2016'),
-          require.resolve('babel-preset-es2017'),
+          [require.resolve('babel-preset-env'), {loose: true, modules: false}],
         ],
         plugins: [
           require.resolve('babel-plugin-transform-react-constant-elements'),
@@ -77,9 +73,7 @@ describe('createBabelConfig()', () => {
         stage: false,
       })).toEqual({
         presets: [
-          [require.resolve('babel-preset-es2015'), {loose: true, modules: false}],
-          require.resolve('babel-preset-es2016'),
-          require.resolve('babel-preset-es2017'),
+          [require.resolve('babel-preset-env'), {loose: true, modules: false}],
         ],
         plugins: [
           [require.resolve('babel-plugin-transform-react-remove-prop-types'), {}],
@@ -93,8 +87,7 @@ describe('createBabelConfig()', () => {
         setRuntimePath: false,
       })).toEqual({
         presets: [
-          [require.resolve('babel-preset-es2015'), {loose: true, modules: false}],
-          require.resolve('babel-preset-es2016'),
+          [require.resolve('babel-preset-env'), {loose: true, modules: false}],
           require.resolve('babel-preset-stage-2'),
         ],
         plugins: [
@@ -120,8 +113,7 @@ describe('createBabelConfig()', () => {
         presets: ['test-preset'],
       })).toEqual({
         presets: [
-          [require.resolve('babel-preset-es2015'), {loose: false, modules: false}],
-          require.resolve('babel-preset-es2016'),
+          [require.resolve('babel-preset-env'), {loose: false, modules: false}],
           require.resolve('babel-preset-stage-0'),
           'test-preset',
         ],
@@ -141,8 +133,8 @@ describe('createBabelConfig()', () => {
           runtime,
         })).toEqual({
           presets: [
-            [require.resolve('babel-preset-es2015'), {loose: true, modules: false}],
-            require.resolve('babel-preset-es2016'),
+            [require.resolve('babel-preset-env'), {loose: true, modules: false}],
+
             require.resolve('babel-preset-stage-2'),
           ],
           plugins: [
@@ -165,8 +157,7 @@ describe('createBabelConfig()', () => {
     it('overrides build stage config with user stage config', () => {
       expect(createBabelConfig({stage: 3}, {stage: 1})).toEqual({
         presets: [
-          [require.resolve('babel-preset-es2015'), {loose: true, modules: false}],
-          require.resolve('babel-preset-es2016'),
+          [require.resolve('babel-preset-env'), {loose: true, modules: false}],
           require.resolve('babel-preset-stage-1'),
         ],
         plugins: [
@@ -179,9 +170,7 @@ describe('createBabelConfig()', () => {
     it('cancels default stage config', () => {
       expect(createBabelConfig({}, {stage: false})).toEqual({
         presets: [
-          [require.resolve('babel-preset-es2015'), {loose: true, modules: false}],
-          require.resolve('babel-preset-es2016'),
-          require.resolve('babel-preset-es2017'),
+          [require.resolve('babel-preset-env'), {loose: true, modules: false}],
         ],
         plugins: [
           DEFAULT_RUNTIME_CONFIG,
@@ -192,8 +181,7 @@ describe('createBabelConfig()', () => {
     it('cancels default runtime config', () => {
       expect(createBabelConfig({}, {runtime: false})).toEqual({
         presets: [
-          [require.resolve('babel-preset-es2015'), {loose: true, modules: false}],
-          require.resolve('babel-preset-es2016'),
+          [require.resolve('babel-preset-env'), {loose: true, modules: false}],
           require.resolve('babel-preset-stage-2'),
         ],
         plugins: [