fix(mini-runner): 修复external module导致的错误 (#9862) (#9881)

* fix(mini-runner): 修复external module导致的错误 (#9862)

* fix(mini-runner): 修复没有分包配置时报'getCacheGroups' of null的错误

packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/packageA/detail/index.jsx

@@ -8,6 +8,7 @@ import '../../css/sub-vendors.css'
 import '../../css/sub-common.css'
 import subCommonStyles from '../../css/sub-common.module.css'
 import vendorsStyles from '../../css/sub-vendors.module.css'
+import _ from 'lodash'
 
 export default class Detail extends Component {
   componentDidMount() {

packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/packageB/list/index.jsx

@@ -5,6 +5,7 @@ import consoleLogSubCommon from '../../utils/consoleLogSubCommon'
 import testExcludeFunction from '../../utils/testExcludeFunction'
 import '../../css/sub-common.css'
 import subCommonStyles from '../../css/sub-common.module.css'
+import _ from 'lodash'
 
 export default class My extends Component {
   componentDidMount () {

packages/taro-mini-runner/src/__tests__/mini-split-chunks.spec.ts

@@ -20,6 +20,13 @@ describe('mini-split-chunks', () => {
   test('should process mini-split-chunks', async () => {
     const appName = 'mini-split-chunks'
     const { stats, config } = await compile(appName, {
+      webpackChain (chain) {
+        chain.merge({
+          externals: [
+            'lodash'
+          ]
+        })
+      },
       optimizeMainPackage: {
         enable: true,
         exclude: [

packages/taro-mini-runner/src/plugins/MiniSplitChunksPlugin.ts

@@ -6,7 +6,7 @@ import * as webpack from 'webpack'
 import * as SplitChunksPlugin from 'webpack/lib/optimize/SplitChunksPlugin'
 import { ConcatSource } from 'webpack-sources'
 import { AppConfig, SubPackage } from '@tarojs/taro'
-import { resolveMainFilePath, readConfig, promoteRelativePath } from '@tarojs/helper'
+import { resolveMainFilePath, readConfig, promoteRelativePath, normalizePath } from '@tarojs/helper'
 import { isString, isFunction, isArray } from '@tarojs/shared'
 
 const PLUGIN_NAME = 'MiniSplitChunkPlugin'
@@ -74,6 +74,10 @@ export default class MiniSplitChunksPlugin extends SplitChunksPlugin {
 
     compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation: any) => {
       compilation.hooks.optimizeChunks.tap(PLUGIN_NAME, (chunks: webpack.compilation.Chunk[]) => {
+        const splitChunksOriginConfig = {
+          ...compiler?.options?.optimization?.splitChunks
+        }
+
         this.subCommonDeps = new Map()
         this.chunkSubCommons = new Map()
         this.subPackagesVendors = new Map()
@@ -84,13 +88,22 @@ export default class MiniSplitChunksPlugin extends SplitChunksPlugin {
         const subChunks = chunks.filter(chunk => this.isSubChunk(chunk))
 
         if (subChunks.length === 0) {
+          this.options = SplitChunksPlugin.normalizeOptions(splitChunksOriginConfig)
           return
         }
 
         subChunks.forEach((subChunk: webpack.compilation.Chunk) => {
           const modules = Array.from(subChunk.modulesIterable)
 
           modules.map((module: any) => {
+            if (this.isExternalModule(module)) {
+              return
+            }
+
+            if (!this.hasModuleId(module)) {
+              return
+            }
+
             if (this.hasExclude() && this.isExcludeModule(module)) {
               return
             }
@@ -141,9 +154,9 @@ export default class MiniSplitChunksPlugin extends SplitChunksPlugin {
          * 用新的option配置生成新的cacheGroups配置
          */
         this.options = SplitChunksPlugin.normalizeOptions({
-          ...compiler?.options?.optimization?.splitChunks,
+          ...splitChunksOriginConfig,
           cacheGroups: {
-            ...compiler?.options?.optimization?.splitChunks?.cacheGroups,
+            ...splitChunksOriginConfig?.cacheGroups,
             ...this.getSubPackageVendorsCacheGroup(),
             ...this.getSubCommonCacheGroup()
           }
@@ -231,7 +244,7 @@ export default class MiniSplitChunksPlugin extends SplitChunksPlugin {
         const subVendorsWxssPath = path.join(subRoot, `${SUB_VENDORS_NAME}${FileExtsMap.STYLE}`)
         const source = new ConcatSource()
 
-        if (assets[this.formatSystemPath(subVendorsWxssPath)]) {
+        if (assets[normalizePath(subVendorsWxssPath)]) {
           const subVendorsAbsolutePath = path.resolve(this.distPath, subVendorsWxssPath)
           const relativePath = this.getRealRelativePath(wxssAbsulutePath, subVendorsAbsolutePath)
 
@@ -243,7 +256,7 @@ export default class MiniSplitChunksPlugin extends SplitChunksPlugin {
             const wxssFileName = `${moduleName}${FileExtsMap.STYLE}`
             const wxssFilePath = path.join(SUB_COMMON_DIR, wxssFileName)
 
-            if (assets[this.formatSystemPath(wxssFilePath)]) {
+            if (assets[normalizePath(wxssFilePath)]) {
               const moduleAbsulutePath = path.resolve(this.distPath, subRoot, SUB_COMMON_DIR, wxssFileName)
               const relativePath = this.getRealRelativePath(wxssAbsulutePath, moduleAbsulutePath)
 
@@ -375,7 +388,7 @@ export default class MiniSplitChunksPlugin extends SplitChunksPlugin {
    * match *\/sub-vendors
    */
   matchSubVendors (chunk: webpack.compilation.Chunk): boolean {
-    const subVendorsRegExps = this.subRoots.map(subRoot => new RegExp(`^${this.formatSystemPath(path.join(subRoot, SUB_VENDORS_NAME))}$`))
+    const subVendorsRegExps = this.subRoots.map(subRoot => new RegExp(`^${normalizePath(path.join(subRoot, SUB_VENDORS_NAME))}$`))
     const isSubVendors = subVendorsRegExps.find(subVendorsRegExp => subVendorsRegExp.test(chunk.name))
 
     return !!isSubVendors
@@ -440,7 +453,7 @@ export default class MiniSplitChunksPlugin extends SplitChunksPlugin {
 
           return chunks.every(chunk => new RegExp(`^${subRoot}\\/`).test(chunk.name))
         },
-        name: this.formatSystemPath(path.join(subRoot, SUB_VENDORS_NAME)),
+        name: normalizePath(path.join(subRoot, SUB_VENDORS_NAME)),
         minChunks: 2,
         priority: 10000
       }
@@ -455,7 +468,7 @@ export default class MiniSplitChunksPlugin extends SplitChunksPlugin {
     const subCommonCacheGroup = {}
 
     this.subCommonDeps.forEach((depInfo: DepInfo, depName: string) => {
-      const cacheGroupName = this.formatSystemPath(path.join(SUB_COMMON_DIR, depName))
+      const cacheGroupName = normalizePath(path.join(SUB_COMMON_DIR, depName))
 
       subCommonCacheGroup[cacheGroupName] = {
         name: cacheGroupName,
@@ -520,9 +533,24 @@ export default class MiniSplitChunksPlugin extends SplitChunksPlugin {
   }
 
   /**
-   * 将window系统下的路径分隔符转成/
+   * 判断module为external module
    */
-  formatSystemPath (p) {
-    return p.replace(/\\/g, '/')
+  isExternalModule (module: any) {
+    return !!module.external
+  }
+
+  /**
+   * 判断是否存在resource和_identifier
+   */
+  hasModuleId (module: any) {
+    if (module.resource) {
+      return true
+    }
+
+    if (module._identifier) {
+      return true
+    }
+
+    return false
   }
 }