Chore: Move babel config to a root babel.config.json (#41615)

* Chore: Move babel config to a root babel.config.json

* Re-add babel cache settings to webpack

* Re-add production browserlist in babel config

* re-add babel hot refresh config

* fix storybook

scripts/webpack/babel.config.js

@@ -1,53 +0,0 @@
-module.exports = function getBabelConfig(options = {}) {
-  const babelOptions = {
-    cacheDirectory: true,
-    cacheCompression: false,
-    babelrc: false,
-    // Note: order is bottom-to-top and/or right-to-left
-    presets: [
-      [
-        '@babel/preset-env',
-        {
-          bugfixes: true,
-          browserslistEnv: process.env.BABEL_ENV || options.BABEL_ENV || 'production',
-          useBuiltIns: 'entry',
-          corejs: '3.10',
-        },
-      ],
-      [
-        '@babel/preset-typescript',
-        {
-          allowNamespaces: true,
-          allowDeclareFields: true,
-        },
-      ],
-      [
-        '@babel/preset-react',
-        {
-          runtime: 'automatic',
-        },
-      ],
-    ],
-    plugins: [
-      [
-        '@babel/plugin-transform-typescript',
-        {
-          allowNamespaces: true,
-          allowDeclareFields: true,
-        },
-      ],
-      ['@babel/plugin-proposal-object-rest-spread', { loose: true }],
-      '@babel/plugin-transform-react-constant-elements',
-      '@babel/plugin-proposal-nullish-coalescing-operator',
-      '@babel/plugin-proposal-optional-chaining',
-      '@babel/plugin-syntax-dynamic-import', // needed for `() => import()` in routes.ts
-      'angularjs-annotate',
-    ],
-  };
-
-  if (options.REACT_REFRESH) {
-    babelOptions.plugins.push('react-refresh/babel');
-  }
-
-  return babelOptions;
-};

scripts/webpack/webpack.dev.js

@@ -8,7 +8,6 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const getBabelConfig = require('./babel.config');
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = (env = {}) =>
@@ -34,7 +33,10 @@ module.exports = (env = {}) =>
           test: /\.tsx?$/,
           use: {
             loader: 'babel-loader',
-            options: getBabelConfig({ BABEL_ENV: 'dev' }),
+            options: {
+              cacheDirectory: true,
+              cacheCompression: false,
+            },
           },
           exclude: /node_modules/,
         },

scripts/webpack/webpack.hot.js

@@ -7,7 +7,6 @@ const { DefinePlugin } = require('webpack');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const getBabelConfig = require('./babel.config');
 
 module.exports = merge(common, {
   devtool: 'inline-source-map',
@@ -46,7 +45,10 @@ module.exports = merge(common, {
         test: /\.tsx?$/,
         use: {
           loader: 'babel-loader',
-          options: getBabelConfig({ BABEL_ENV: 'dev', REACT_REFRESH: true }),
+          options: {
+            cacheDirectory: true,
+            cacheCompression: false,
+          },
         },
         exclude: /node_modules/,
         include: [path.resolve(__dirname, '../../public/'), path.resolve(__dirname, '../../packages/')],

scripts/webpack/webpack.prod.js

@@ -7,7 +7,6 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const getBabelConfig = require('./babel.config');
 
 module.exports = (env = {}) =>
   merge(common, {
@@ -28,7 +27,10 @@ module.exports = (env = {}) =>
           use: [
             {
               loader: 'babel-loader',
-              options: getBabelConfig(),
+              options: {
+                cacheDirectory: true,
+                cacheCompression: false,
+              },
             },
           ],
         },