前端工程化-基于Taro的Web端Monorepo架构改造

Posted 2022-10-24 Songlcy

前端工程化-Genebox小程序端Monorepo架构改造中介绍了在使用Taro框架下，结合yarn workspace + lerna 来改造Monorepo架构的方式和流程，这篇文章与本篇文章内容有很大关联，未阅读的可以先查看前端工程化-Genebox小程序端Monorepo架构改造。

使用Taro框架来进行小程序开发主要因素为实现多端代码的复用。比如 Web、RN等。如何将当前Monorepo架构下的代码编译到Web端呢？

在Web端的改造中，仍然采用小程序改造下的引用不同lerna模块下的页面路由方式规则

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

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

样式

小程序端采用CSSModule的样式方式编写，为了在原有小程序端基础上支持H5的样式编译，需要在项目的config/index下添加如下代码

h5: 
    publicPath: '/',
    staticDirectory: 'static',
    postcss: 
      autoprefixer: 
        enable: true,
        config: 
        ,
      ,
      // css modules 功能开关与相关配置
      cssModules: 
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: 
          namingPattern: 'module', // 转换模式，取值为 global/module，下文详细说明
          generateScopedName: '[name]__[local]___[hash:base64:5]',
        ,
      ,
    ,
  ,

跨平台开发

Taro 在编译时提供了一些内置的环境变量来帮助用户做一些特殊处理。

process.env.TARO_ENV：用于判断当前的编译平台类型。取值：weapp / swan / alipay / tt / qq / jd / h5 / rn

可以通过这个变量来区分不同环境，从而使用不同的逻辑。在编译阶段，会移除不属于当前编译类型的代码，只保留当前编译类型下的代码，例如：

1. 在微信小程序和 H5 端分别引用不同资源：

if (process.env.TARO_ENV === 'h5') 

 else if (process.env.TARO_ENV === 'weapp') 
   

不要解构 process.env 来获取环境变量，请直接以完整书写的方式（process.env.TARO_ENV）来进行使用。 

2. 多端组件

├── test.js Test 组件默认的形式，编译到微信小程序、百度小程序和 H5 之外的端使用的版本
├── test.weapp.js Test 组件的微信小程序版本
├── test.swan.js Test 组件的百度小程序版本
└── test.h5.js Test 组件的 H5 版本

 3. 多端脚本逻辑

原则就是多端文件对外的接口保持一致。例如微信小程序上使用 Taro.setNavigationBarTitle 来设置页面标题，H5 则是使用 document.title。那么我们可以封装一个 setTitle 方法来抹平两个平台的差异。

set_title.weapp.js

import Taro from '@tarojs/taro'
export default function setTitle (title) 
  Taro.setNavigationBarTitle(
    title
  )

set_title.h5.js

export default function setTitle (title) 
  document.title = title

import setTitle from '../utils/set_title'

setTitle('页面标题')

webpack-runner

在小程序端下，我们通过修改@tarojs/mini-runner目录中的 MiniPlugin.js 源码支持了Monorepo架构下的小程序端代码编译。

为支持在Taro编译到Web端时支持 Lerna 不同模块的引入，同样我们需要通过修改@tarojs/webpack-runner目录中的 MainPlugin.js 源码支持了Monorepo架构下的Web端代码编译。

diff --git a/node_modules/@tarojs/webpack-runner/dist/plugins/MainPlugin.js b/node_modules/@tarojs/webpack-runner/dist/plugins/MainPlugin.js
index ca6f4c5..28f7e72 100644
--- a/node_modules/@tarojs/webpack-runner/dist/plugins/MainPlugin.js
+++ b/node_modules/@tarojs/webpack-runner/dist/plugins/MainPlugin.js
@@ -95,10 +95,15 @@ class MainPlugin 
         
         const  framework  = this.options;
         this.pages = new Set([
-            ...appPages.map(item => (
-                name: item,
-                path: helper_1.resolveMainFilePath(path.join(this.options.sourceDir, item), helper_1.FRAMEWORK_EXT_MAP[framework])
-            ))
+            ...appPages.map(item => 
+                const pagePath = helper_1.resolveMainFilePath(path.join(this.options.sourceDir, item), helper_1.FRAMEWORK_EXT_MAP[framework]);
+                return 
+                    name: item.replace('@pkg/', ''),
+                    path: pagePath.includes('@pkg')
+                        ? pagePath.replace(/projects\\/.*\\/src\\/@pkg\\/pages/, 'packages/pages/src')
+                        : pagePath, // 兼容从packages中引用的页面文件
+                ;
+            )
         ]);
         this.getSubPackages();
     
@@ -123,8 +128,10 @@ class MainPlugin 
                         if (!hasPageIn) 
                             const pagePath = helper_1.resolveMainFilePath(path.join(this.options.sourceDir, pageItem), helper_1.FRAMEWORK_EXT_MAP[framework]);
                             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中引用的页面文件
                             );
                             // eslint-disable-next-line no-unused-expressions
                             (_a = this.appConfig.pages) === null || _a === void 0 ? void 0 : _a.push(pageItem);

与小程序端的修改思路大致一样，在解析app.config下的pages时，对命名到文件的路径进行映射。 

taro-lodaer

 taro-loader中的h5.js文件下主要负责了Web端路由的初始化创建配置和文件之间的引入。同样需要对pages的解析做映射调整，使其能够正确解析Monorepo对应目录下的文件。

diff --git a/node_modules/@tarojs/taro-loader/lib/h5.js b/node_modules/@tarojs/taro-loader/lib/h5.js
index 193413e..e9f6ba5 100644
--- a/node_modules/@tarojs/taro-loader/lib/h5.js
+++ b/node_modules/@tarojs/taro-loader/lib/h5.js
@@ -5,13 +5,30 @@ const path_1 = require("path");
 const utils_1 = require("./utils");
 function genResource(path, pages, loaderContext) 
     const stringify = (s) => loader_utils_1.stringifyRequest(loaderContext, s);
+    // 兼容从packages中引用的页面文件
+    let tempPath = path.replace(/@pkg\\//g, ''); // 用于router映射
+    let loadPath = undefined; // 真实文件路径 
+    // 此处需要分别处理主包和分包情况
+    const externalModuleTag = path.indexOf("@pkg");
+    if(externalModuleTag > 0) 
+    // 分包模块
+    // report/@pkg => pages/src/report
+    loadPath = path_1.join('', ('pages/src/' + path).replace(/@pkg\\//g, ''));
+     else if (externalModuleTag === 0) 
+    // 主包模块
+        loadPath = path_1.join('', path.replace(/@pkg\\/pages/g, 'pages/src'));
+     else 
+    // 内部工程模块
+        tempPath = path;
+        loadPath = path_1.join(loaderContext.context, tempPath);
+    
     return `
   Object.assign(
-      path: '$path',
+      path: '$tempPath',
       load: function() 
-          return import($stringify(path_1.join(loaderContext.context, path)))
+          return import($stringify(loadPath))
       
-  , require($stringify(pages.get(path))).default || ),
+  , require($stringify(pages.get(path.replace(/@pkg\\//g, '')))).default || ),
 `;
 
 function default_1()