v1.40.0: [#375] Improvements of Babel & Webpack configs

birdofpreyru · Aug 4, 2024 · 713e213 · 713e213
1 parent 04f0def
commit 713e213
Show file tree

Hide file tree

Showing 13 changed files with 225 additions and 97 deletions.
diff --git a/__tests__/config/babel/__snapshots__/node-ssr.ts.snap b/__tests__/config/babel/__snapshots__/node-ssr.ts.snap
@@ -55,6 +55,7 @@ exports[`"development" environment "baseAssetsOutputPath" option 1`] = `
     [
       "@babel/env",
       {
+        "modules": "cjs",
         "targets": "current node",
       },
     ],
@@ -130,6 +131,7 @@ exports[`"development" environment "baseAssetsOutputPath" option 2`] = `
     [
       "@babel/env",
       {
+        "modules": "cjs",
         "targets": "current node",
       },
     ],
@@ -186,6 +188,7 @@ exports[`"development" environment "noStyling" variation 1`] = `
     [
       "@babel/env",
       {
+        "modules": "cjs",
         "targets": "current node",
       },
     ],
@@ -248,6 +251,7 @@ exports[`"development" environment "noStyling" variation 2`] = `
     [
       "@babel/env",
       {
+        "modules": "cjs",
         "targets": "current node",
       },
     ],
@@ -317,6 +321,7 @@ exports[`"development" environment Default config 1`] = `
     [
       "@babel/env",
       {
+        "modules": "cjs",
         "targets": "current node",
       },
     ],
@@ -392,6 +397,7 @@ exports[`"development" environment Default config 2`] = `
     [
       "@babel/env",
       {
+        "modules": "cjs",
         "targets": "current node",
       },
     ],
@@ -461,6 +467,7 @@ exports[`"production" environment "baseAssetsOutputPath" option 1`] = `
     [
       "@babel/env",
       {
+        "modules": "cjs",
         "targets": "current node",
       },
     ],
@@ -536,6 +543,7 @@ exports[`"production" environment "baseAssetsOutputPath" option 2`] = `
     [
       "@babel/env",
       {
+        "modules": "cjs",
         "targets": "current node",
       },
     ],
@@ -592,6 +600,7 @@ exports[`"production" environment "noStyling" variation 1`] = `
     [
       "@babel/env",
       {
+        "modules": "cjs",
         "targets": "current node",
       },
     ],
@@ -654,6 +663,7 @@ exports[`"production" environment "noStyling" variation 2`] = `
     [
       "@babel/env",
       {
+        "modules": "cjs",
         "targets": "current node",
       },
     ],
@@ -723,6 +733,7 @@ exports[`"production" environment Default config 1`] = `
     [
       "@babel/env",
       {
+        "modules": "cjs",
         "targets": "current node",
       },
     ],
@@ -798,6 +809,7 @@ exports[`"production" environment Default config 2`] = `
     [
       "@babel/env",
       {
+        "modules": "cjs",
         "targets": "current node",
       },
     ],

diff --git a/__tests__/config/babel/__snapshots__/webpack.ts.snap b/__tests__/config/babel/__snapshots__/webpack.ts.snap
@@ -25,6 +25,7 @@ exports[`"development" environment "noStyling" variation 1`] = `
     [
       "@babel/env",
       {
+        "modules": false,
         "targets": "defaults or chrome >= 69",
       },
     ],
@@ -70,6 +71,7 @@ exports[`"development" environment "noStyling" variation 2`] = `
     [
       "@babel/env",
       {
+        "modules": false,
         "targets": "defaults or chrome >= 69",
       },
     ],
@@ -121,6 +123,7 @@ exports[`"development" environment Default config 1`] = `
     [
       "@babel/env",
       {
+        "modules": false,
         "targets": "defaults or chrome >= 69",
       },
     ],
@@ -178,6 +181,7 @@ exports[`"development" environment Default config 2`] = `
     [
       "@babel/env",
       {
+        "modules": false,
         "targets": "defaults or chrome >= 69",
       },
     ],
@@ -216,6 +220,7 @@ exports[`"production" environment "noStyling" variation 1`] = `
     [
       "@babel/env",
       {
+        "modules": false,
         "targets": "defaults or chrome >= 69",
       },
     ],
@@ -260,6 +265,7 @@ exports[`"production" environment "noStyling" variation 2`] = `
     [
       "@babel/env",
       {
+        "modules": false,
         "targets": "defaults or chrome >= 69",
       },
     ],
@@ -310,6 +316,7 @@ exports[`"production" environment Default config 1`] = `
     [
       "@babel/env",
       {
+        "modules": false,
         "targets": "defaults or chrome >= 69",
       },
     ],
@@ -366,6 +373,7 @@ exports[`"production" environment Default config 2`] = `
     [
       "@babel/env",
       {
+        "modules": false,
         "targets": "defaults or chrome >= 69",
       },
     ],

diff --git a/config-ts-src/babel/node-ssr.ts b/config-ts-src/babel/node-ssr.ts
@@ -24,20 +24,22 @@ type OptionsT = WebpackConfigOptionsT & {
 
 /**
  * Creates a new base config.
- * @param {object} babel Babel compiler.
- * @param {object} [options] It supports all options of
- *  {@link module:babel/webpack.getPreset babel/webpack's getPreset()},
- *  but it overrides `targets` option with `current node` value, and further
+ * @param babel Babel compiler.
+ * @param [options] It supports all options of our Babel config for Webpack,
+ *  but it overrides `targets` option with "current node" value, and further
  *  accepts the following:
- * @param {string} [options.baseAssetsOutputPath] Path prefix for emitted
+ * @param [options.baseAssetsOutputPath] Path prefix for emitted
  *  image assets.
- * @return {object} Created config object.
- * @ignore
+ * @return Created config object.
  */
 function newBase(babel: BabelCompilerI, options: OptionsT = {}) {
   const config = getWebpackBabelConfig(
     babel,
-    { ...options, targets: 'current node' },
+    {
+      modules: 'cjs',
+      targets: 'current node',
+      ...options,
+    },
   );
 
   const baseAssetsOutputPath = options.baseAssetsOutputPath || '';

diff --git a/config-ts-src/babel/webpack.ts b/config-ts-src/babel/webpack.ts
@@ -36,7 +36,12 @@ export type ConfigT = {
   plugins: PresetOrPluginT[];
 };
 
+// Valid values for `module` option of @babel/preset-env,
+// as per https://babeljs.io/docs/babel-preset-env#modules
+type ModuleT = 'amd' | 'auto' | 'cjs' | 'commonjs' | 'systemjs' | 'umd' | false;
+
 export type OptionsT = {
+  modules?: ModuleT;
   noRR?: boolean;
   noStyling?: boolean;
   targets?: string | string[] | { [key: string]: string };
@@ -53,8 +58,13 @@ export type OptionsT = {
 function newBaseConfig(options: OptionsT): ConfigT {
   return {
     presets: [
-      // Chrome 69 is the browser for Android API 28.
-      ['@babel/env', { targets: options.targets || 'defaults or chrome >= 69' }],
+      ['@babel/env', {
+        // Leaves it to the Webpack to deal with modules.
+        modules: options.modules ?? false,
+
+        // Chrome 69 is the browser/WebView for Android 9 (API level 28).
+        targets: options.targets || 'defaults or chrome >= 69',
+      }],
 
       // TODO: Starting from Babel 8, "automatic" will be the default runtime,
       // thus once upgraded to Babel 8, runtime should be removed from

diff --git a/config-ts-src/webpack/app-base.ts b/config-ts-src/webpack/app-base.ts
@@ -10,8 +10,6 @@ import path from 'path';
 
 import SM from 'sitemap';
 
-import { type Configuration, type WebpackPluginInstance } from 'webpack';
-
 import {
   clone,
   defaults,
@@ -23,7 +21,14 @@ import autoprefixer from 'autoprefixer';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import forge from 'node-forge';
 
-import { DefinePlugin, ProgressPlugin } from 'webpack';
+import {
+  type Configuration,
+  type RuleSetRule,
+  type WebpackPluginInstance,
+  DefinePlugin,
+  ProgressPlugin,
+} from 'webpack';
+
 import WorkboxPlugin from 'workbox-webpack-plugin';
 
 import {
@@ -41,7 +46,11 @@ export type BuildInfoT = {
 
 export type OptionsT = {
   babelEnv: string;
+  babelLoaderExclude?: RuleSetRule['exclude'];
+
+  // TODO: Find and use the actual type for Babel options object.
   babelLoaderOptions?: object;
+
   context: string;
   cssLocalIdent?: string;
   dontEmitBuildInfo?: boolean;
@@ -65,6 +74,8 @@ export type OptionsT = {
  * directly with the created config object.
  * @param {string} ops.babelEnv Babel environment to use for the Babel
  * compilation step.
+ * @param [ops.babelLoaderExclude] Overrides the default value of `exclude`
+ *  option of babel-loader, which is [/node_modules/].
  * @param {object} [ops.babelLoaderOptions] Overrides for default Babel options
  * of JSX and SVG files loader.
  * @param ops.context Base URL for resolution of relative config paths.
@@ -320,9 +331,10 @@ export default function configFactory(ops: OptionsT): Configuration {
         enforce: 'pre',
         use: ['source-map-loader'],
       }, {
-        /* Loads JS and JSX moudles, and inlines SVG assets. */
-        test: ops.typescript ? /\.((j|t)sx?|svg)$/ : /\.(jsx?|svg)$/,
-        exclude: [/node_modules/],
+        // Loads JS modules (.cjs, .js, .jsx); TS modules (.ts, .tsx);
+        // and SVG assets (.svg).
+        test: ops.typescript ? /\.(cjs|(j|t)sx?|svg)$/ : /\.(cjs|jsx?|svg)$/,
+        exclude: ops.babelLoaderExclude ?? [/node_modules/],
         loader: 'babel-loader',
         options: {
           babelrc: false,

diff --git a/config-ts-src/webpack/app-production.ts b/config-ts-src/webpack/app-production.ts
@@ -27,8 +27,13 @@ export default function configFactory(ops: OptionsT): Configuration {
   ];
 
   const res = merge(baseFactory({
+    babelLoaderExclude: [],
     ...ops,
     babelEnv: 'production',
+    babelLoaderOptions: {
+      compact: true,
+      ...ops.babelLoaderOptions,
+    },
     entry,
     mode: 'production',
   }), {

diff --git a/config-ts-src/webpack/lib-base.ts b/config-ts-src/webpack/lib-base.ts
@@ -55,6 +55,7 @@ export default function configFactory(ops: OptionsT): Configuration {
       '@dr.pogodin/react-themes',
       '@dr.pogodin/react-utils',
       'axios',
+      'cookie',
       'dayjs',
       'lodash',
       /node-forge/,