refactor: webpack babel 的 exclude 配置逻辑优化 & scripts 正则匹配 mjs/mts (#16466)

* refactor: webpack babel 的 exclude 配置逻辑优化 * fix: lint * docs: 注释 * feat: scripts 正则匹配 mjs/mts * feat: 保留之前的逻辑
NervJS · Sep 6, 2024 · 4297c2a · 4297c2a
1 parent 23a7d49
commit 4297c2a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 27 deletions.
diff --git a/packages/taro-helper/src/constants.ts b/packages/taro-helper/src/constants.ts
@@ -89,7 +89,7 @@ export const VUE_EXT: string[] = ['.vue']
 export const REG_JS = /\.js(\?.*)?$/
 export const REG_SCRIPT = /\.(js|jsx)(\?.*)?$/
 export const REG_TYPESCRIPT = /\.(tsx|ts)(\?.*)?$/
-export const REG_SCRIPTS = /\.[tj]sx?$/i
+export const REG_SCRIPTS = /\.m?[tj]sx?$/i
 export const REG_VUE = /\.vue$/i
 export const REG_SASS = /\.(s[ac]ss)$/
 export const REG_SASS_SASS = /\.sass$/

diff --git a/packages/taro-webpack-runner/src/utils/chain.ts b/packages/taro-webpack-runner/src/utils/chain.ts
@@ -428,30 +428,27 @@ export const parseModule = (appPath: string, {
     }
   }
 
-  if (compile.exclude && compile.exclude.length) {
-    scriptRule.exclude = [
-      ...compile.exclude,
-      filename => /css-loader/.test(filename) || (/node_modules/.test(filename) && !(/taro/.test(filename)))
-    ]
-  } else if (compile.include && compile.include.length) {
-    scriptRule.include = [
-      ...compile.include,
-      sourceDir,
-      filename => /taro/.test(filename)
-    ]
-  } else {
-    /**
-     * 要优先处理 css-loader 问题
-     *
-     * https://github.com/webpack-contrib/mini-css-extract-plugin/issues/471#issuecomment-750266195
-     *
-     * 若包含 @tarojs/components，则跳过 babel-loader 处理
-     * 除了包含 taro 和 inversify 的第三方依赖均不经过 babel-loader 处理
-     */
-    scriptRule.exclude = [filename =>
-      /css-loader/.test(filename) ||
-      // || /@tarojs[\\/]components/.test(filename) Note: stencil 2.14 开始使用了 import.meta.url 需要额外处理
-      (/node_modules/.test(filename) && !(/taro/.test(filename) || /inversify/.test(filename)))]
+  /** Note: 和 webpack5 的 include 和 exclude 的逻辑保持基本一致：
+    * 什么都不配置时，默认只处理 sourceDir 和 taro 和 inversify 的第三方依赖
+    * 如果配置了 include，则把配置的 include 内容 unshift 到默认的 include
+    * 如果配置了 exclude，则把配置的 exclude 内容 unshift 到默认的 exclude （webpack5 会直用配置的 exclude 进行覆盖）
+    */
+  scriptRule.include = [
+    sourceDir,
+    filename => /taro/.test(filename) || /inversify/.test(filename)
+  ]
+  /**
+    * Note: 要优先处理 css-loader 问题 所以这里不管如何配置include和exclude，都要进行排除，这是不同于 webpack5 的地方
+    *
+    * https://github.com/webpack-contrib/mini-css-extract-plugin/issues/471#issuecomment-750266195
+    *
+    */
+  scriptRule.exclude = [filename => /css-loader/.test(filename)]
+  if (Array.isArray(compile.include)) {
+    scriptRule.include.unshift(...compile.include)
+  }
+  if (Array.isArray(compile.exclude)) {
+    scriptRule.exclude.unshift(...compile.exclude)
   }
 
   const rule: {

diff --git a/packages/taro-webpack5-runner/src/webpack/H5WebpackModule.ts b/packages/taro-webpack5-runner/src/webpack/H5WebpackModule.ts
@@ -268,9 +268,10 @@ export class H5WebpackModule {
       rule.include.unshift(...compile.include)
     }
 
-    rule.exclude = [filename => /@tarojs[\\/]components/.test(filename)]
     if (Array.isArray(compile.exclude)) {
-      rule.exclude.unshift(...compile.exclude)
+      rule.exclude = [...compile.exclude]
+    } else {
+      rule.exclude = [filename => /@tarojs[\\/]components/.test(filename)]
     }
 
     return rule