From 3b497f3e8db1d3c70e88db7365769bd4586d7343 Mon Sep 17 00:00:00 2001 From: Josh Hunt Date: Thu, 18 Nov 2021 16:38:58 +0000 Subject: [PATCH] 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 | 58 ++++++++++++++++++++++++++ package.json | 6 +-- packages/grafana-ui/.storybook/main.ts | 1 - scripts/webpack/babel.config.js | 53 ----------------------- scripts/webpack/webpack.dev.js | 6 ++- scripts/webpack/webpack.hot.js | 6 ++- scripts/webpack/webpack.prod.js | 6 ++- 7 files changed, 73 insertions(+), 63 deletions(-) create mode 100644 babel.config.json delete mode 100644 scripts/webpack/babel.config.js diff --git a/babel.config.json b/babel.config.json new file mode 100644 index 00000000000..c641ff488e6 --- /dev/null +++ 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 index 03ab65ad30a..13e93e56c52 100644 --- 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 index e036dbcafa1..25d9e9aab26 100644 --- 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 deleted file mode 100644 index 6c5c8987688..00000000000 --- a/scripts/webpack/babel.config.js +++ /dev/null @@ -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; -}; diff --git a/scripts/webpack/webpack.dev.js b/scripts/webpack/webpack.dev.js index fefab131135..acdb133bc7d 100644 --- 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 index 6e51f3f1dd2..2abb19043ec 100644 --- 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 index 7cd3037ce42..3595d2d34a8 100644 --- 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, + }, }, ], },