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

babel.config.json

@@ -0,0 +1,58 @@
+{
+  "babelrc": false,
+  // Note: order is bottom-to-top and/or right-to-left
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "bugfixes": true,
+        "browserslistEnv": "dev",
+        "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"
+  ],
+  "env": {
+    "production": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "browserslistEnv": "production"
+          }
+        ]
+      ]
+    },
+    "hot": {
+      "plugins": ["react-refresh/babel"]
+    }
+  }
+}

package.json

@@ -7,8 +7,8 @@
   "repository": "github:grafana/grafana",
   "scripts": {
     "api-tests": "jest --notify --watch --config=devenv/e2e-api-tests/jest.js",
-    "build": "webpack --config scripts/webpack/webpack.prod.js",
+    "build": "NODE_ENV=production webpack --config scripts/webpack/webpack.prod.js",
-    "build:nominify": "webpack --config scripts/webpack/webpack.prod.js --env noMinify=1",
+    "build:nominify": "yarn run build --env noMinify=1",
     "dev": "webpack --progress --color --config scripts/webpack/webpack.dev.js",
     "e2e": "./e2e/start-and-run-suite",
     "e2e:debug": "./e2e/start-and-run-suite debug",
@@ -35,7 +35,7 @@
     "prettier:check": "prettier --list-different \"**/*.{scss,md,mdx}\"",
     "prettier:write": "prettier --list-different \"**/*.{scss,md,mdx}\" --write",
     "start": "yarn themes:generate && webpack --progress --color --watch --env noTsCheck=0 --config scripts/webpack/webpack.dev.js",
-    "start:hot": "yarn themes:generate && webpack serve --progress --color --config scripts/webpack/webpack.hot.js",
+    "start:hot": "yarn themes:generate && NODE_ENV=hot webpack serve --progress --color --config scripts/webpack/webpack.hot.js",
     "start:noTsCheck": "yarn themes:generate && webpack --progress --color --watch --env noTsCheck=1 --config scripts/webpack/webpack.dev.js",
     "stats": "webpack --mode production --config scripts/webpack/webpack.prod.js --profile --json > compilation-stats.json",
     "storybook": "yarn workspace @grafana/ui storybook --ci",

packages/grafana-ui/.storybook/main.ts

@@ -2,7 +2,6 @@ const path = require('path');
 const TerserPlugin = require('terser-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
-const getBabelConfig = require('../../../scripts/webpack/babel.config');
 
 const stories = ['../src/**/*.story.{js,jsx,ts,tsx,mdx}'];
 

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,
+              },
             },
           ],
         },