Chore: Move babel config to a root babel.config.json (grafana#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
michiboo · Nov 18, 2021 · 3b497f3 · 3b497f3
1 parent 7dcc5ca
commit 3b497f3
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 63 deletions.
diff --git a/babel.config.json b/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"]
+    }
+  }
+}
diff --git a/package.json b/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:nominify": "webpack --config scripts/webpack/webpack.prod.js --env noMinify=1",
+    "build": "NODE_ENV=production webpack --config scripts/webpack/webpack.prod.js",
+    "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",

diff --git a/packages/grafana-ui/.storybook/main.ts b/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}'];
 

diff --git a/scripts/webpack/babel.config.js b/scripts/webpack/babel.config.js
diff --git a/scripts/webpack/webpack.dev.js b/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/,
         },

diff --git a/scripts/webpack/webpack.hot.js b/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/')],

diff --git a/scripts/webpack/webpack.prod.js b/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,
+              },
             },
           ],
         },