feat: support --mpa-entry (#3299)

* feat: support mpa-entry * fix: detect mpa * chore: add docs and example
alibaba · Jun 30, 2020 · 629fc79 · 629fc79
1 parent 21c7102
commit 629fc79
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 11 deletions.
diff --git a/docs/guide/advance/mpa.md b/docs/guide/advance/mpa.md
@@ -93,6 +93,20 @@ createApp(appConfig);
 
 关于状态管理的更多内容，请查看文档 [状态管理](/docs/guide/basic/store.md)
 
+## 其他
+
+### 指定入口
+
+默认 MPA 应用在开发阶段会启动所有页面，如果你只想调试某个页面，可以通过指定 `--mpa-entry` 来启动。
+
+通过命令行参数指定启动的页面：
+
+```bash
+"scripts": {
+  "start": "icejs start --mpa-entry dashboard",
+}
+```
+
 只需要这么简单，你的 SPA 应用就可以变成 MPA 应用了。
 
 * MPA 项目示例 [详见](https://github.com/ice-lab/icejs/tree/master/examples/basic-mpa)
diff --git a/examples/basic-mpa/package.json b/examples/basic-mpa/package.json
@@ -11,7 +11,7 @@
     "@types/react-dom": "^16.9.4"
   },
   "scripts": {
-    "start": "icejs start",
+    "start": "icejs start --mpa-entry Dashboard",
     "build": "icejs build"
   },
   "engines": {

diff --git a/packages/plugin-mpa/src/index.ts b/packages/plugin-mpa/src/index.ts
@@ -2,8 +2,20 @@ import { IPlugin } from '@alib/build-scripts';
 import * as path from 'path';
 import * as fs from 'fs-extra';
 
-const plugin: IPlugin = ({ context, registerUserConfig, modifyUserConfig }) => {
-  const { rootDir, userConfig } = context;
+const plugin: IPlugin = ({ context, registerUserConfig, registerCliOption, modifyUserConfig, log }) => {
+  const { rootDir, userConfig, commandArgs } = context;
+
+  // register mpa in build.json
+  registerUserConfig({
+    name: 'mpa',
+    validation: 'boolean',
+  });
+
+  // support --mpa-entry to specify mpa entry
+  registerCliOption({
+    name: 'mpa-entry',
+    commands: ['start'],
+  });
 
   if (userConfig.mpa) {
     const pagesPath = path.join(rootDir, 'src/pages');
@@ -12,7 +24,7 @@ const plugin: IPlugin = ({ context, registerUserConfig, modifyUserConfig }) => {
         .filter(page => !/^[._]/.test(page))
         .map(page => path.parse(page).name)
       : [];
-    const mpaEntry = pages.reduce((acc, pageName) => {
+    let entries = pages.reduce((acc, pageName) => {
       const entryName = pageName.toLocaleLowerCase();
       const pageEntry = getPageEntry(rootDir, pageName);
       if (!pageEntry) return acc;
@@ -21,14 +33,29 @@ const plugin: IPlugin = ({ context, registerUserConfig, modifyUserConfig }) => {
         [entryName]: `src/pages/${pageName}/${pageEntry}`
       };
     }, {});
+
+    const finalEntries = {};
+    if (commandArgs.mpaEntry) {
+      const arr = commandArgs.mpaEntry.split(',');
+      arr.forEach((pageName) => {
+        const entryName = pageName.toLocaleLowerCase();
+        if (entries[entryName]) {
+          finalEntries[entryName] = entries[entryName];
+        }
+      });
+      if (Object.keys(finalEntries).length > 0) {
+        entries = finalEntries;
+        log.info('已启用 --map-entry 指定多页入口 \n', JSON.stringify(entries));
+      } else {
+        log.warn(`--map-entry ${commandArgs.entry}`, '未能匹配到指定入口');
+      }
+    } else {
+      log.info('使用多页面模式 \n', JSON.stringify(entries));
+    }
+
     // modify entry
-    modifyUserConfig('entry', mpaEntry);
+    modifyUserConfig('entry', entries);
   }
-  // register mpa in build.json
-  registerUserConfig({
-    name: 'mpa',
-    validation: 'boolean',
-  });
 };
 
 function getPageEntry(rootDir, pageName) {

diff --git a/packages/plugin-react-app/src/userConfig/entry.js b/packages/plugin-react-app/src/userConfig/entry.js
@@ -37,7 +37,7 @@ module.exports = (config, value, context) => {
   }
 
   const entryNames = Object.keys(entry);
-  const isMultiEntry = entryNames.length > 1;
+  const isMultiEntry = entryNames.length > 1 || userConfig.mpa;
   let pluginConfig = {};
   if (config.plugins.get('HtmlWebpackPlugin')) {
     pluginConfig = { ...config.plugin('HtmlWebpackPlugin').get('args')[0] };