fix(uni-builder): repeatedly insert babel plugin when using tsLoader (#…

…5370)
web-infra-dev · Feb 6, 2024 · 244745f · 244745f
1 parent eec5792
commit 244745f
Show file tree

Hide file tree

Showing 4 changed files with 266 additions and 1 deletion.
diff --git a/.changeset/ninety-apricots-rhyme.md b/.changeset/ninety-apricots-rhyme.md
@@ -0,0 +1,7 @@
+---
+'@modern-js/uni-builder': patch
+---
+
+fix(uni-builder): repeatedly insert babel plugin when using tsLoader in some edge case
+
+fix(uni-builder): 修复在一些边界场景下使用 tsLoader 时会重复添加 babel plugin 的问题
diff --git a/packages/builder/uni-builder/src/webpack/plugins/tsLoader.ts b/packages/builder/uni-builder/src/webpack/plugins/tsLoader.ts
@@ -119,7 +119,12 @@ export const pluginTsLoader = (
           .test(TS_REGEX)
           .use(CHAIN_ID.USE.BABEL)
           .loader(require.resolve('babel-loader'))
-          .options(babelLoaderOptions)
+          .options({
+            ...babelLoaderOptions,
+            // fix repeatedly insert babel plugin in some boundary cases
+            plugins: [...(babelLoaderOptions.plugins || [])],
+            presets: [...(babelLoaderOptions.presets || [])],
+          })
           .end()
           .use(CHAIN_ID.USE.TS)
           .loader(require.resolve('ts-loader'))

diff --git a/packages/builder/uni-builder/tests/__snapshots__/tsLoader.test.ts.snap b/packages/builder/uni-builder/tests/__snapshots__/tsLoader.test.ts.snap
@@ -1,5 +1,194 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`plugin-ts-loader > should insert babel plugin correctly in some edge case 1`] = `
+[
+  {
+    "resolve": {
+      "fullySpecified": false,
+    },
+    "test": /\\\\\\.m\\?js/,
+  },
+  {
+    "include": [
+      {
+        "and": [
+          "",
+          {
+            "not": /\\[\\\\\\\\/\\]node_modules\\[\\\\\\\\/\\]/,
+          },
+        ],
+      },
+      /\\\\\\.\\(\\?:ts\\|tsx\\|jsx\\|mts\\|cts\\)\\$/,
+    ],
+    "test": /\\\\\\.\\(\\?:js\\|mjs\\|cjs\\|jsx\\)\\$/,
+    "use": [
+      {
+        "loader": "<WORKSPACE>/node_modules/<PNPM_INNER>/babel-loader/lib/index.js",
+        "options": {
+          "babelrc": false,
+          "compact": true,
+          "configFile": false,
+          "plugins": [
+            [
+              "babel-plugin-xxx",
+            ],
+            [
+              "babel-plugin-import",
+              {
+                "libraryDirectory": "es",
+                "libraryName": "xxx-components",
+                "style": true,
+              },
+            ],
+            [
+              "<WORKSPACE>/node_modules/<PNPM_INNER>/babel-plugin-styled-components/lib/index.js",
+              {
+                "displayName": true,
+                "pure": true,
+                "ssr": false,
+                "transpileTemplateLiterals": true,
+              },
+            ],
+          ],
+          "presets": [
+            [
+              "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-env/lib/index.js",
+              {
+                "bugfixes": true,
+                "corejs": {
+                  "proposals": true,
+                  "version": "3.32",
+                },
+                "exclude": [
+                  "transform-typeof-symbol",
+                ],
+                "modules": false,
+                "targets": [
+                  "> 0.01%",
+                  "not dead",
+                  "not op_mini all",
+                ],
+                "useBuiltIns": "entry",
+              },
+            ],
+            [
+              "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-typescript/lib/index.js",
+              {
+                "allExtensions": true,
+                "allowDeclareFields": true,
+                "allowNamespaces": true,
+                "isTSX": true,
+                "optimizeConstEnums": true,
+              },
+            ],
+            [
+              "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
+              {
+                "development": false,
+                "runtime": "automatic",
+                "useBuiltIns": true,
+                "useSpread": false,
+              },
+            ],
+          ],
+        },
+      },
+    ],
+  },
+]
+`;
+
+exports[`plugin-ts-loader > should insert babel plugin correctly in some edge case 2`] = `
+[
+  {
+    "include": [
+      {
+        "and": [
+          "",
+          {
+            "not": /\\[\\\\\\\\/\\]node_modules\\[\\\\\\\\/\\]/,
+          },
+        ],
+      },
+      /\\\\\\.\\(\\?:ts\\|tsx\\|jsx\\|mts\\|cts\\)\\$/,
+    ],
+    "test": /\\\\\\.\\(\\?:ts\\|mts\\|cts\\|tsx\\)\\$/,
+    "use": [
+      {
+        "loader": "<WORKSPACE>/node_modules/<PNPM_INNER>/babel-loader/lib/index.js",
+        "options": {
+          "plugins": [
+            [
+              "babel-plugin-xxx",
+            ],
+            [
+              "babel-plugin-import",
+              {
+                "libraryDirectory": "es",
+                "libraryName": "xxx-components",
+                "style": true,
+              },
+            ],
+          ],
+          "presets": [
+            [
+              "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-env/lib/index.js",
+              {
+                "bugfixes": true,
+                "corejs": {
+                  "proposals": true,
+                  "version": "3.32",
+                },
+                "exclude": [
+                  "transform-typeof-symbol",
+                ],
+                "modules": false,
+                "targets": [
+                  "> 0.01%",
+                  "not dead",
+                  "not op_mini all",
+                ],
+                "useBuiltIns": "entry",
+              },
+            ],
+            [
+              "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-typescript/lib/index.js",
+              {
+                "allExtensions": true,
+                "allowDeclareFields": true,
+                "allowNamespaces": true,
+                "isTSX": true,
+                "optimizeConstEnums": true,
+              },
+            ],
+            [
+              "<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
+              {
+                "development": false,
+                "runtime": "automatic",
+                "useBuiltIns": true,
+                "useSpread": false,
+              },
+            ],
+          ],
+        },
+      },
+      {
+        "loader": "<WORKSPACE>/node_modules/<PNPM_INNER>/ts-loader/index.js",
+        "options": {
+          "allowTsInNodeModules": true,
+          "compilerOptions": {
+            "module": "esnext",
+            "target": "esnext",
+          },
+          "transpileOnly": true,
+        },
+      },
+    ],
+  },
+]
+`;
+
 exports[`plugin-ts-loader > should set include/exclude 1`] = `
 [
   {

diff --git a/packages/builder/uni-builder/tests/tsLoader.test.ts b/packages/builder/uni-builder/tests/tsLoader.test.ts
@@ -36,4 +36,68 @@ describe('plugin-ts-loader', () => {
 
     expect(matchRules({ config, testFile: 'a.ts' })).toMatchSnapshot();
   });
+
+  it('should insert babel plugin correctly in some edge case', async () => {
+    const { NODE_ENV } = process.env;
+    process.env.NODE_ENV = 'production';
+
+    const rsbuild = await createUniBuilder({
+      bundlerType: 'webpack',
+      config: {
+        tools: {
+          tsLoader: {},
+          babel: {
+            plugins: [
+              [
+                'babel-plugin-import',
+                {
+                  libraryName: 'xxx-components',
+                  libraryDirectory: 'es',
+                  style: true,
+                },
+              ],
+            ],
+          },
+          webpackChain: (chain, { CHAIN_ID }) => {
+            const withBabelPlugin = (babelOptions: any) => {
+              if (typeof babelOptions !== 'object' || !babelOptions) {
+                return babelOptions;
+              }
+
+              babelOptions.plugins = babelOptions.plugins || [];
+              babelOptions.plugins.unshift(['babel-plugin-xxx']);
+              return babelOptions;
+            };
+
+            if (chain.module.rules.has(CHAIN_ID.RULE.JS)) {
+              chain.module
+                .rule(CHAIN_ID.RULE.JS)
+                .use(CHAIN_ID.USE.BABEL)
+                .tap(withBabelPlugin);
+            }
+            if (chain.module.rules.has(CHAIN_ID.RULE.TS)) {
+              chain.module
+                .rule(CHAIN_ID.RULE.TS)
+                .use(CHAIN_ID.USE.BABEL)
+                .tap(withBabelPlugin);
+            }
+          },
+        },
+      },
+      cwd: '',
+    });
+
+    const {
+      origin: { bundlerConfigs },
+    } = await rsbuild.inspectConfig();
+
+    expect(
+      matchRules({ config: bundlerConfigs[0], testFile: 'a.js' }),
+    ).toMatchSnapshot();
+    expect(
+      matchRules({ config: bundlerConfigs[0], testFile: 'a.ts' }),
+    ).toMatchSnapshot();
+
+    process.env.NODE_ENV = NODE_ENV;
+  });
 });