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

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
  }
 }