babel plugins, presets and their configs per babel-preset-react-app

lib/pipeline/webpack.config.js

@@ -110,12 +110,25 @@ const base = {
                 alias: embarkAliases
               }
             ],
+            'babel-plugin-macros',
+            '@babel/plugin-transform-destructuring',
+            [
+              '@babel/plugin-proposal-class-properties', {
+                loose: true
+              }
+            ],
+            [
+              '@babel/plugin-proposal-object-rest-spread', {
+                useBuiltIns: true
+              }
+            ],
             [
               '@babel/plugin-transform-runtime', {
                 corejs: 2,
                 useESModules: true
               }
-            ]
+            ],
+            '@babel/plugin-syntax-dynamic-import'
           ].map(resolve),
           presets: [
             [
@@ -126,7 +139,11 @@ const base = {
                 }
               }
             ],
-            '@babel/preset-react'
+            [
+              '@babel/preset-react', {
+                useBuiltIns: true
+              }
+            ]
           ].map(resolve)
         }
       }
@@ -149,6 +166,13 @@ const base = {
   profile: true, stats: 'verbose',
   resolve: {
     alias: embarkAliases,
+    extensions: [
+      // webpack defaults
+      // see: https://webpack.js.org/configuration/resolve/#resolve-extensions
+      '.wasm', '.mjs', '.js', '.json',
+      // additional extensions
+      '.jsx'
+    ],
     modules: [
       ...versions,
       'node_modules',
@@ -163,6 +187,20 @@ const base = {
   }
 };
 
+const baseBabelLoader = base.module.rules[3];
+
+// Flow
+// -----------------------------------------------------------------------------
+
+// should be false in configs that have isTypeScriptEnabled = true
+const isFlowEnabled = true;
+if (isFlowEnabled) {
+  // position @babel/plugin-transform-flow-strip-types per babel-preset-react-app
+  baseBabelLoader.options.plugins.unshift(
+    require.resolve('@babel/plugin-transform-flow-strip-types')
+  );
+}
+
 // development config
 // -----------------------------------------------------------------------------
 
@@ -175,6 +213,10 @@ development.mode = 'development';
 development.name = 'development';
 const devBabelLoader = development.module.rules[3];
 devBabelLoader.options.compact = false;
+// enable 'development' option for @babel/preset-react
+const devPresetReact = devBabelLoader.options.presets[1];
+const devPresetReactOptions = devPresetReact[1];
+devPresetReactOptions.development = true;
 
 // production config
 // -----------------------------------------------------------------------------
@@ -182,6 +224,14 @@ devBabelLoader.options.compact = false;
 const production = cloneDeep(base);
 production.mode = 'production';
 production.name = 'production';
+const prodBabelLoader = production.module.rules[3];
+// position babel-plugin-transform-react-remove-prop-types per babel-preset-react-app
+prodBabelLoader.options.plugins.splice(prodBabelLoader.length - 1, 0, [
+  require.resolve('babel-plugin-transform-react-remove-prop-types'),
+  {
+    removeImport: true
+  }
+]);
 // compression of webpack's JS output not enabled by default
 // production.plugins.push(new CompressionPlugin());