NervJS · luckyadam · May 21, 2021 · Nov 24, 2020 · Dec 3, 2020 · Dec 22, 2020
diff --git a/packages/taro-mini-runner/package.json b/packages/taro-mini-runner/package.json
@@ -62,9 +62,11 @@
     "less-loader": "7.3.0",
     "loader-utils": "^1.2.3",
     "lodash": "^4.17.11",
+    "md5": "^2.3.0",
     "micromatch": "^4.0.2",
     "mini-css-extract-plugin": "0.8.0",
     "miniprogram-simulate": "^1.1.5",
+    "mkdirp": "^1.0.4",
     "ora": "^3.4.0",
     "postcss-import": "12.0.1",
     "postcss-loader": "^3.0.0",

diff --git a/packages/taro-mini-runner/src/__tests__/__snapshots__/mini-split-chunks.spec.ts.snap b/packages/taro-mini-runner/src/__tests__/__snapshots__/mini-split-chunks.spec.ts.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mini-split-chunks should process mini-split-chunks 1`] = `40`;
diff --git a/packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/babel.config.js b/packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/babel.config.js
@@ -0,0 +1,10 @@
+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+  presets: [
+    ['taro', {
+      framework: 'react',
+      ts: false
+    }]
+  ]
+}
diff --git a/packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/app.config.js b/packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/app.config.js
@@ -0,0 +1,26 @@
+export default {
+  pages: [
+    'pages/index/index'
+  ],
+  window: {
+    backgroundTextStyle: 'light',
+    navigationBarBackgroundColor: '#fff',
+    navigationBarTitleText: 'WeChat',
+    navigationBarTextStyle: 'black'
+  },
+  subpackages: [
+    {
+      root: 'packageA',
+      pages: [
+        'detail/index',
+        'my/index'
+      ]
+    },
+    {
+      root: 'packageB',
+      pages: [
+        'list/index'
+      ]
+    }
+  ]
+}
diff --git a/packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/app.css b/packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/app.css
@@ -0,0 +1,4 @@
+page {
+    width: '100%';
+    height: '100%';
+}
diff --git a/packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/app.js b/packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/app.js
@@ -0,0 +1,20 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React, { Component } from 'react'
+import './app.css'
+
+class App extends Component {
+  componentDidMount () {}
+
+  componentDidShow () {}
+
+  componentDidHide () {}
+
+  componentDidCatchError () {}
+
+  // this.props.children 是将要会渲染的页面
+  render () {
+    return this.props.children
+  }
+}
+
+export default App
diff --git a/packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/css/sub-common.css b/packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/css/sub-common.css
@@ -0,0 +1,3 @@
+.sub-common {
+    content: 'sub-common';
+}
diff --git a/...s/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/css/sub-common.module.css b/...s/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/css/sub-common.module.css
@@ -0,0 +1,3 @@
+.sub-common-module {
+    content: 'sub-common-module';
+}
diff --git a/packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/css/sub-vendors.css b/packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/css/sub-vendors.css
@@ -0,0 +1,3 @@
+.sub-vendors {
+    content: 'sub-vendors';
+}
diff --git a/.../taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/css/sub-vendors.module.css b/.../taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/css/sub-vendors.module.css
@@ -0,0 +1,3 @@
+.sub-vendors-module {
+    content: 'sub-vendors-module';
+}
diff --git a/packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/index.html b/packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-touch-fullscreen" content="yes">
+  <meta name="format-detection" content="telephone=no,address=no">
+  <meta name="apple-mobile-web-app-status-bar-style" content="white">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
+  <title></title>
+  <script>
+    !function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);
+  </script>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
diff --git a/...-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/packageA/detail/index.config.js b/...-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/packageA/detail/index.config.js
@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '详情页'
+}
diff --git a/...s/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/packageA/detail/index.css b/...s/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/packageA/detail/index.css
@@ -0,0 +1,4 @@
+.detail {
+  width: 100%;
+  height: 100%;
+}
diff --git a/...s/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/packageA/detail/index.jsx b/...s/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/packageA/detail/index.jsx
@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import { View, Text } from '@tarojs/components'
+import consoleLogMain from '../../utils/consoleLogMain'
+import consoleLogSubVendors from '../../utils/consoleLogSubVendors'
+import testExcludeString from '../../utils/testExcludeString'
+import './index.css'
+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'
+
+export default class Detail extends Component {
+  componentDidMount() {
+    consoleLogMain()
+    consoleLogSubVendors()
+    testExcludeString()
+  }
+
+  render() {
+    return (
+      <View className='detail'>
+        <Text className={`
+          sub-vendors
+          sub-common
+          ${subCommonStyles['sub-common-module']}
+          ${vendorsStyles['sub-vendors-module']}
+        `}>I m detail</Text>
+      </View>
+    )
+  }
+}
diff --git a/...taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/packageA/my/index.config.js b/...taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/packageA/my/index.config.js
@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '个人中心页'
+}
diff --git a/packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/packageA/my/index.jsx b/packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/packageA/my/index.jsx
@@ -0,0 +1,32 @@
+import React, { Component } from 'react'
+import { View, Text } from '@tarojs/components'
+import consoleLogMain from '../../utils/consoleLogMain'
+import consoleLogSubVendors from '../../utils/consoleLogSubVendors'
+import consoleLogSubCommon from '../../utils/consoleLogSubCommon'
+import testExcludeString from '../../utils/testExcludeString'
+import testExcludeFunction from '../../utils/testExcludeFunction'
+import '../../css/sub-vendors.css'
+import vendorsStyles from '../../css/sub-vendors.module.css'
+
+export default class My extends Component {
+  componentDidMount () {
+    consoleLogMain()
+    consoleLogSubVendors()
+    consoleLogSubCommon('packageA')
+    testExcludeString()
+    testExcludeFunction()
+  }
+
+  render () {
+    return (
+      <View 
+        className={`
+          sub-vendors
+          ${vendorsStyles['sub-vendors-module']}
+        `}
+        >
+        <Text>I m my</Text>
+      </View>
+    )
+  }
+}
diff --git a/...ro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/packageB/list/index.config.js b/...ro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/packageB/list/index.config.js
@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '列表页'
+}
diff --git a/...ges/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/packageB/list/index.jsx b/...ges/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/packageB/list/index.jsx
@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import { View, Text } from '@tarojs/components'
+import consoleLogMain from '../../utils/consoleLogMain'
+import consoleLogSubCommon from '../../utils/consoleLogSubCommon'
+import testExcludeFunction from '../../utils/testExcludeFunction'
+import '../../css/sub-common.css'
+import subCommonStyles from '../../css/sub-common.module.css'
+
+export default class My extends Component {
+  componentDidMount () {
+      consoleLogMain()
+      consoleLogSubCommon('packageB')
+      testExcludeFunction()
+  }
+
+  render () {
+    return (
+      <View 
+        className={`
+          sub-common
+          ${subCommonStyles['sub-common-module']}
+        `}
+        >
+        <Text>list page</Text>
+      </View>
+    )
+  }
+}
diff --git a/...taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/pages/index/index.config.js b/...taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/pages/index/index.config.js
@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '首页'
+}
diff --git a/packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/pages/index/index.jsx b/packages/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/pages/index/index.jsx
@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+import { View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import consoleLogMain from '../../utils/consoleLogMain'
+
+export default class Index extends Component {
+  componentDidMount() {
+    consoleLogMain()
+  }
+
+  render () {
+    return (
+      <View className='index'>
+        <View onClick={() => Taro.navigateTo({ url: '/packageA/detail/index' })}>
+          Go to detail
+        </View>
+        <View onClick={() => Taro.navigateTo({ url: '/packageA/my/index' })}>
+          Go to my
+        </View>
+        <View onClick={() => Taro.navigateTo({ url: '/packageB/list/index' })}>
+          Go to list
+        </View>
+      </View>
+    )
+  }
+}
diff --git a/...ges/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/utils/consoleLogMain.js b/...ges/taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/utils/consoleLogMain.js
@@ -0,0 +1,3 @@
+export default () => {
+  console.log('Main package')
+}
diff --git a/...aro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/utils/consoleLogSubCommon.js b/...aro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/utils/consoleLogSubCommon.js
@@ -0,0 +1,3 @@
+export default (subpackage) => {
+    console.log(`Subpackage: ${subpackage}`)
+}
diff --git a/...ro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/utils/consoleLogSubVendors.js b/...ro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/utils/consoleLogSubVendors.js
@@ -0,0 +1,3 @@
+export default () => {
+    console.log('This is packageA vendors')
+}
diff --git a/...aro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/utils/testExcludeFunction.js b/...aro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/utils/testExcludeFunction.js
@@ -0,0 +1,3 @@
+export default () => {
+    console.log('testExcludeFunction')
+}
diff --git a/.../taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/utils/testExcludeString.js b/.../taro-mini-runner/src/__tests__/fixtures/mini-split-chunks/src/utils/testExcludeString.js
@@ -0,0 +1,3 @@
+export default () => {
+    console.log('testExcludeString')
+}
diff --git a/packages/taro-mini-runner/src/__tests__/mini-split-chunks.spec.ts b/packages/taro-mini-runner/src/__tests__/mini-split-chunks.spec.ts
@@ -0,0 +1,95 @@
+import * as fs from 'fs-extra'
+import * as path from 'path'
+
+let compile
+let readDir
+
+describe('mini-split-chunks', () => {
+  beforeAll(() => {
+    jest.unmock('webpack')
+  })
+
+  beforeEach(() => {
+    jest.isolateModules(() => {
+      const compiler = require('./utils/compiler')
+      compile = compiler.compile
+      readDir = compiler.readDir
+    })
+  })
+
+  test('should process mini-split-chunks', async () => {
+    const appName = 'mini-split-chunks'
+    const { stats, config } = await compile(appName, {
+      optimizeMainPackage: {
+        enable: true,
+        exclude: [
+          path.resolve(__dirname, './fixtures/mini-split-chunks/src/utils/testExcludeString.js'),
+          (module) => module.resource?.indexOf('testExcludeFunction') >= 0
+        ]
+      },
+      postcss: {
+        cssModules: {
+          enable: true,
+          config: {
+            namingPattern: 'module',
+            generateScopedName: '[name]__[local]___[hash:base64:5]'
+          }
+        }
+      }
+    })
+
+    const assets = stats.toJson().assets || []
+    expect(assets.length).toMatchSnapshot()
+
+    const files = readDir(fs, config.outputRoot)
+
+    /**
+     * 因为该plugin输出的文件名跟用户路径有关，snapshot输出的文件内容不稳定，这里改用判断输出文件是否存在来测试
+     */
+    files.forEach(file => {
+      const fileContent = fs.readFileSync(file).toString()
+      const jsExt = '.js'
+      const wxssExt = '.wxss'
+      const needTestPages = [
+        'packageA/detail/index',
+        'packageA/my/index',
+        'packageB/list/index'
+      ]
+      const checkChunksExist = ({ ext, regexp }) => {
+        const isNeedTestFile = needTestPages.find(needTestPage => new RegExp(`${needTestPage}${ext}$`).test(file))
+
+        if (!isNeedTestFile) return
+
+        const matchChunks = (fileContent || '').match(new RegExp(regexp, 'g'))
+        const chunkPaths = (matchChunks || []).map(chunkPath => {
+          return chunkPath.replace(new RegExp(regexp), '$1')
+        })
+
+        chunkPaths.forEach(chunkPath => {
+          const chunkExt = ext === jsExt ? jsExt : ''
+          const chunkAbsolutePath = path.resolve(file, '..', chunkPath + chunkExt)
+          const isExists = fs.pathExistsSync(chunkAbsolutePath)
+
+          // 根据match到的module path查看输出的chunk是否存在
+          expect(isExists).toBe(true)
+        })
+      }
+
+      // js
+      if (path.extname(file) === jsExt) {
+        checkChunksExist({
+          ext: jsExt,
+          regexp: 'require\\("(.*)"\\);'
+        })
+      }
+
+      // wxss
+      if (path.extname(file) === wxssExt) {
+        checkChunksExist({
+          ext: wxssExt,
+          regexp: new RegExp('@import "(.*)";')
+        })
+      }
+    })
+  })
+})
diff --git a/packages/taro-mini-runner/src/__tests__/utils/compiler.ts b/packages/taro-mini-runner/src/__tests__/utils/compiler.ts
@@ -12,7 +12,7 @@ import build from '../../index'
 //   join: () => string
 // }
 
-function readDir (fs: IFs, dir: string) {
+export function readDir (fs: IFs, dir: string) {
   let files: string[] = []
   const list = fs.readdirSync(dir)
   list.forEach(item => {