Babel: Refactoring config so that it's shared and removes legacy plugin (#32559)

* Updated plugins

* Fixing stuff

* Update

* Fixing more stuff
This commit is contained in:
Torkel Ödegaard
2021-03-31 19:09:19 +02:00
committed by GitHub
parent d42bfedd9e
commit b0ffcfd558
7 changed files with 125 additions and 195 deletions
+52
View File
@@ -0,0 +1,52 @@
module.exports = function getBabelConfig() {
return {
cacheDirectory: true,
babelrc: false,
// Note: order is top-to-bottom and/or left-to-right
// Note: order is bottom-to-top and/or right-to-left
presets: [
[
'@babel/preset-env',
{
targets: {
browsers: 'last 3 versions',
},
useBuiltIns: 'entry',
corejs: 3,
modules: false,
},
],
[
'@babel/preset-typescript',
{
allowNamespaces: true,
allowDeclareFields: true,
},
],
[
'@babel/preset-react',
{
runtime: 'automatic',
},
],
],
plugins: [
[
'@babel/plugin-transform-typescript',
{
allowNamespaces: true,
allowDeclareFields: true,
},
],
['@babel/plugin-proposal-class-properties', { loose: true }],
['@babel/plugin-proposal-private-methods', { loose: true }],
['@babel/plugin-proposal-object-rest-spread', { loose: true }],
// Waiting with this need to refactoring timeSrv & locationUtil.init
// '@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',
],
};
};
+2 -37
View File
@@ -8,6 +8,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-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 = {}) =>
@@ -35,43 +36,7 @@ module.exports = (env = {}) =>
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
babelrc: false,
// Note: order is top-to-bottom and/or left-to-right
plugins: [
[
require('@rtsao/plugin-proposal-class-properties'),
{
loose: true,
},
],
'@babel/plugin-proposal-nullish-coalescing-operator',
'@babel/plugin-proposal-optional-chaining',
'angularjs-annotate',
],
// Note: order is bottom-to-top and/or right-to-left
presets: [
[
'@babel/preset-env',
{
targets: {
browsers: 'last 3 versions',
},
useBuiltIns: 'entry',
corejs: 3,
modules: false,
},
],
[
'@babel/preset-typescript',
{
allowNamespaces: true,
},
],
'@babel/preset-react',
],
},
options: getBabelConfig(),
},
],
},
+2 -33
View File
@@ -7,6 +7,7 @@ const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const getBabelConfig = require('./babel.config');
module.exports = merge(common, {
mode: 'development',
@@ -55,39 +56,7 @@ module.exports = merge(common, {
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
babelrc: false,
// Note: order is top-to-bottom and/or left-to-right
plugins: [
[
require('@rtsao/plugin-proposal-class-properties'),
{
loose: true,
},
],
'@babel/plugin-proposal-nullish-coalescing-operator',
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-syntax-dynamic-import', // needed for `() => import()` in routes.ts
'angularjs-annotate',
'react-hot-loader/babel',
],
// Note: order is bottom-to-top and/or right-to-left
presets: [
[
'@babel/preset-env',
{
targets: {
browsers: 'last 3 versions',
},
useBuiltIns: 'entry',
modules: false,
},
],
'@babel/preset-typescript',
'@babel/preset-react',
],
},
options: getBabelConfig(),
},
],
},
+2 -38
View File
@@ -8,6 +8,7 @@ const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const getBabelConfig = require('./babel.config');
module.exports = merge(common, {
mode: 'production',
@@ -27,44 +28,7 @@ module.exports = merge(common, {
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
babelrc: false,
// Note: order is top-to-bottom and/or left-to-right
plugins: [
[
require('@rtsao/plugin-proposal-class-properties'),
{
loose: true,
},
],
'@babel/plugin-proposal-nullish-coalescing-operator',
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-syntax-dynamic-import', // needed for `() => import()` in routes.ts
'angularjs-annotate',
],
// Note: order is bottom-to-top and/or right-to-left
presets: [
[
'@babel/preset-env',
{
targets: {
browsers: 'last 3 versions',
},
useBuiltIns: 'entry',
corejs: 3,
modules: false,
},
],
[
'@babel/preset-typescript',
{
allowNamespaces: true,
},
],
'@babel/preset-react',
],
},
options: getBabelConfig(),
},
],
},