前端工程化-Genebox小程序端Monorepo架构改造

Posted 2022-11-26 Songlcy

工具

yarn workspace + lerna 

yarn workspace 管理依赖，lerna负责更新发布

功能模块

授权

用户相关，登录....

唾液盒绑定

唾液盒切换

唾液盒检测进度

地址编辑

下单

回寄

协议

网页WebView相关

配置

路由

拆包

package.json

commitlint

husky

tsconfig

根据目前的项目状况，设计如下：

package 入口统一为 index.js

package 源码入口统一为 src/index.js

package 编译入口统一为 dist/index.js

package 注入 LOCAL_DEBUG 环境变量， 在index.js 中区分是调试还是发布环境，调试环境 ruquire(./src/index.js) 保证所有源码可调试。发布环境 ruquire(./dist/index.js) 保证所有源码不被发布。

引用不同lerna模块下的页面路由方式规则：

主入口路由命名规则：@pkg/pages/login

分包入口路由命名规则：@pkg/list/index

为支持在Taro编译时支持 Lerna 不同模块的引入，通过修改 MiniPlugin.js 源码 patch 补丁方案来解决 

路径统一为从 /node_modules/引入。

• apply(compiler) : 插件入口

• run(compiler): 分析 app 入口文件，搜集页面、组件信息

1. getPages()： 将路由名称进行正则匹配，sourceDir改为对应源文件路径。

2. getSubPackages(): 收集分包配置中的页面，匹配 pagePath 是否包含pkg，并进行修改 sourceDir 及 pageItem

3. generateMiniFiles(): 生成小程序相关文件, 此处遍历出的page path 为 修改过的sourceDir，为了能够将lerna不同模块的页面包编译到宿主小程序工程的dist，需要将路径改回当前小程序工程的src/下的路径

4. 将路由改为dist目录下对应源文件目录路径

源码Patch如下：

diff --git a/node_modules/@tarojs/mini-runner/dist/plugins/MiniPlugin.js b/node_modules/@tarojs/mini-runner/dist/plugins/MiniPlugin.js
index d4fc47c..3a3a583 100644
--- a/node_modules/@tarojs/mini-runner/dist/plugins/MiniPlugin.js
+++ b/node_modules/@tarojs/mini-runner/dist/plugins/MiniPlugin.js
@@ -432,11 +432,14 @@ class TaroMiniPlugin 
                 const pageTemplatePath = this.getTemplatePath(pagePath);
                 const isNative = this.isNativePageORComponent(pageTemplatePath);
                 return 
-                    name: item,
-                    path: pagePath,
+                    name: item.replace('@pkg/', ''),
+                    path: pagePath.includes('@pkg')
+                        ? pagePath.replace(/projects\\/.*\\/src\\/@pkg\\/pages/, 'packages/pages/src')
+                        : pagePath, // 兼容从packages中引用的页面文件
                     isNative,
                     stylePath: isNative ? this.getStylePath(pagePath) : undefined,
-                    templatePath: isNative ? this.getTemplatePath(pagePath) : undefined
+                    templatePath: isNative ? this.getTemplatePath(pagePath) : undefined,
+                    lsPath: pagePath.replace('@pkg/', ''), // 保留原始路径
                 ;
             )
         ]);
@@ -608,11 +611,14 @@ class TaroMiniPlugin 
                             const templatePath = this.getTemplatePath(pagePath);
                             const isNative = this.isNativePageORComponent(templatePath);
                             this.pages.add(
-                                name: pageItem,
-                                path: pagePath,
+                                name: pageItem.replace('@pkg/', ''),
+                                path: pagePath.includes('@pkg')
+                                    ? pagePath.replace(/projects\\/.*\\/src\\/.*\\/@pkg/, `packages/pages/src/$root`) // 分包包名作为寻找路径
+                                    : pagePath, // 兼容从packages中引用的页面文件
                                 isNative,
                                 stylePath: isNative ? this.getStylePath(pagePath) : undefined,
-                                templatePath: isNative ? this.getTemplatePath(pagePath) : undefined
+                                templatePath: isNative ? this.getTemplatePath(pagePath) : undefined,
+                                lsPath: pagePath.replace('@pkg/', ''), // 保留原始路径
                             );
                         
                     );
@@ -730,19 +736,20 @@ class TaroMiniPlugin 
                 
             );
             this.pages.forEach(page => 
-                const importBaseTemplatePath = helper_1.promoteRelativePath(path.relative(page.path, path.join(sourceDir, this.getTemplatePath(baseTemplateName))));
+                // 使用保留的原始路径生成文件--page.lsPath
+                const importBaseTemplatePath = helper_1.promoteRelativePath(path.relative(page.lsPath, path.join(sourceDir, this.getTemplatePath(baseTemplateName))));
                 const config = this.filesConfig[this.getConfigFilePath(page.name)];
                 if (config) 
-                    const importBaseCompPath = helper_1.promoteRelativePath(path.relative(page.path, path.join(sourceDir, this.getTargetFilePath(this.getIsBuildPluginPath(baseCompName, isBuildPlugin), ''))));
-                    const importCustomWrapperPath = helper_1.promoteRelativePath(path.relative(page.path, path.join(sourceDir, this.getTargetFilePath(this.getIsBuildPluginPath(customWrapperName, isBuildPlugin), ''))));
+                    const importBaseCompPath = helper_1.promoteRelativePath(path.relative(page.lsPath, path.join(sourceDir, this.getTargetFilePath(this.getIsBuildPluginPath(baseCompName, isBuildPlugin), ''))));
+                    const importCustomWrapperPath = helper_1.promoteRelativePath(path.relative(page.lsPath, path.join(sourceDir, this.getTargetFilePath(this.getIsBuildPluginPath(customWrapperName, isBuildPlugin), ''))));
                     config.content.usingComponents = Object.assign( [customWrapperName]: importCustomWrapperPath , config.content.usingComponents);
                     if (!template.isSupportRecursive && !page.isNative) 
                         config.content.usingComponents[baseCompName] = importBaseCompPath;
                     
-                    this.generateConfigFile(compilation, page.path, config.content);
+                    this.generateConfigFile(compilation, page.lsPath, config.content);
                 
                 if (!page.isNative) 
-                    this.generateTemplateFile(compilation, page.path, template.buildPageTemplate, importBaseTemplatePath);
+                    this.generateTemplateFile(compilation, page.lsPath, template.buildPageTemplate, importBaseTemplatePath);
                 
             );
             this.generateTabBarFiles(compilation);
@@ -773,7 +780,7 @@ class TaroMiniPlugin 
         unOfficalConfigs.forEach(item => 
             delete config[item];
         );
-        const fileConfigStr = JSON.stringify(config);
+        const fileConfigStr = JSON.stringify(config).replace(/@pkg\\//g, ''); // App.json 文件pages路径还原
         compilation.assets[fileConfigName] = 
             size: () => fileConfigStr.length,
             source: () => fileConfigStr