Taro项目分包

背景

近期公司项目要将其他项目引进现有小程序，考虑到代码维护的问题，决定用分包注入的方式来实现。

整体流程

1、选择正确的Taro版本

2、安装编译插件

3、编译输出混合模式的代码

4、移动打包好的文件到主项目小程序目录下

操作流程

安装Taro

Taro v3.1.4 开始支持原生混合，因此，Taro版本的选择需要在3.1.4以上。

安装编译插件

安装插件 @tarojs/plugin-indie

npm i @tarojs/plugin-indie --save-dev

使用插件

// config/index.js
const config = {
  plugins: ['@tarojs/plugin-indie'],
}

编译项目时，使用 --blended 参数以输出混合模式的代码。

# 以混合模式进行打包  
$ taro build --type [platform] --blended

引入 @tarojs/plugin-mv 插件，自动化挪动打包后的文件

// plugin-mv/index.js
const fs = require('fs-extra')
const path = require('path')

export default (ctx, options) => {
  ctx.onBuildFinish(() => {
   
    // Taro v3.1.4
    const blended = ctx.runOpts.blended || ctx.runOpts.options.blended
    
    if (!blended) return

    console.log('编译结束！')

    const rootPath = path.resolve(__dirname, '../..')
    const miniappPath = path.join(rootPath, 'miniapp')
    const outputPath = path.resolve(__dirname, '../dist')
    const destPath = path.join(miniappPath, 'taro')

    if (fs.existsSync(destPath)) {
      fs.removeSync(destPath)
    }
    fs.copySync(outputPath, destPath)

    console.log('拷贝结束！')
  })
}

在配置文件中添加plugin-mv插件

// config/index.js
const path = require('path')
const config = { 
// ... 
    plugins: [ 
        '@tarojs/plugin-indie', 
        [path.join(process.cwd(), '/plugin-mv/index.js')] 
    ]
    // ... 
}

重新打包，这样就可以将项目文件打包到主项目小程序对应的路由文件中去了。
之后，我们在主项目小程序中，在app.json中添加对应的路由，就完成了。

遇到的问题

分包注入后，进入分包页面，经常提示重复注册页面

Please do not register multiple Pages in comp.js

排查结果是主包和分包加载的文件都使用了同个变量，用jsonpFunction配置即可解决问题。

// config/index.js
config = {
  mini: {
    webpackChain (chain) {
      chain.merge({
        output: {
          // 可以配合 npm script 和环境变量来动态修改
          jsonpFunction: process.env.JSONP_NAME || "webpackJsonp"
        }
      })
    }
  }
}

思考

分包如何实现环境域名可配置

由于分包的项目是先编译打包出来的，因此，项目中的接口调用使用的域名也是预定的，所以，如何实现分包域名随着主包域名变化，实现开发、测试、生产同步，是目前困扰到我的。当然，也有以下几个方案，但我仍旧觉得不够完美。

方案一

前端开发可配置页面，手动切换域名。（该页面需隐藏，且每次都需手动切换）

方案二

后端开发接口，此接口不区分环境，由接口返回所需使用的域名