WIP: Add option to build modern ES6 code

packages/babel-preset-react-app/create.js

@@ -27,6 +27,7 @@ module.exports = function(api, opts, env) {
   var isEnvProduction = env === 'production';
   var isEnvTest = env === 'test';
   var isFlowEnabled = validateBoolOption('flow', opts.flow, true);
+  var isModern = validateBoolOption('modern', opts.modern, false);
 
   if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) {
     throw new Error(
@@ -38,7 +39,30 @@ module.exports = function(api, opts, env) {
     );
   }
 
-  return {
+  function getEnvOptions({ isModern }) {
+    const defaultOpts = {
+      // `entry` transforms `@babel/polyfill` into individual requires for
+      // the targeted browsers. This is safer than `usage` which performs
+      // static code analysis to determine what's required.
+      // This is probably a fine default to help trim down bundles when
+      // end-users inevitably import '@babel/polyfill'.
+      useBuiltIns: 'entry',
+      // Do not transform modules to CJS
+      modules: false,
+    };
+
+    if (isModern) {
+      return Object.assign(defaultOpts, {
+        targets: {
+          esmodules: true,
+        },
+      });
+    }
+
+    return defaultOpts;
+  }
+
+  const babelPreset = {
     presets: [
       isEnvTest && [
         // ES features necessary for user's Node version
@@ -52,16 +76,7 @@ module.exports = function(api, opts, env) {
       (isEnvProduction || isEnvDevelopment) && [
         // Latest stable ECMAScript features
         require('@babel/preset-env').default,
-        {
-          // `entry` transforms `@babel/polyfill` into individual requires for
-          // the targeted browsers. This is safer than `usage` which performs
-          // static code analysis to determine what's required.
-          // This is probably a fine default to help trim down bundles when
-          // end-users inevitably import '@babel/polyfill'.
-          useBuiltIns: 'entry',
-          // Do not transform modules to CJS
-          modules: false,
-        },
+        getEnvOptions({ isModern }),
       ],
       [
         require('@babel/preset-react').default,
@@ -103,7 +118,7 @@ module.exports = function(api, opts, env) {
         },
       ],
       // Polyfills the runtime needed for async/await and generators
-      [
+      !isModern && [
         require('@babel/plugin-transform-runtime').default,
         {
           helpers: false,
@@ -119,18 +134,23 @@ module.exports = function(api, opts, env) {
         },
       ],
       // function* () { yield 42; yield 43; }
-      !isEnvTest && [
-        require('@babel/plugin-transform-regenerator').default,
-        {
-          // Async functions are converted to generators by @babel/preset-env
-          async: false,
-        },
-      ],
+      !isEnvTest &&
+        !isModern && [
+          require('@babel/plugin-transform-regenerator').default,
+          {
+            // Async functions are converted to generators by @babel/preset-env
+            async: false,
+          },
+        ],
       // Adds syntax support for import()
       require('@babel/plugin-syntax-dynamic-import').default,
       isEnvTest &&
         // Transform dynamic import to require
         require('babel-plugin-transform-dynamic-import').default,
     ].filter(Boolean),
   };
+
+  // console.log('PRESET', JSON.stringify(babelPreset)
+
+  return babelPreset;
 };

packages/react-dev-utils/printBuildError.js

@@ -13,11 +13,11 @@ module.exports = function printBuildError(err) {
   const message = err != null && err.message;
   const stack = err != null && err.stack;
 
-  // Add more helpful message for UglifyJs error
+  // Add more helpful message for Terser error
   if (
     stack &&
     typeof message === 'string' &&
-    message.indexOf('from UglifyJs') !== -1
+    message.indexOf('from Terser') !== -1
   ) {
     try {
       const matched = /(.+)\[(.+):(.+),(.+)\]\[.+\]/.exec(stack);

packages/react-error-overlay/package.json

@@ -60,7 +60,7 @@
     "rimraf": "^2.6.2",
     "settle-promise": "1.0.0",
     "source-map": "0.5.6",
-    "uglifyjs-webpack-plugin": "1.2.5",
+    "terser-webpack-plugin": "^1.0.0",
     "webpack": "^4.8.1"
   },
   "jest": {

packages/react-error-overlay/webpack.config.iframe.js

@@ -8,7 +8,7 @@
 
 const path = require('path');
 const webpack = require('webpack');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {
   mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
@@ -49,8 +49,8 @@ module.exports = {
     minimizer: [
       // This code is embedded as a string, so it would never be optimized
       // elsewhere.
-      new UglifyJsPlugin({
-        uglifyOptions: {
+      new TerserPlugin({
+        terserOptions: {
           compress: {
             warnings: false,
             comparisons: false,