背景
近期公司项目要将其他项目引进现有小程序,考虑到代码维护的问题,决定用分包注入的方式来实现。
整体流程
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"
}
})
}
}
}
思考
分包如何实现环境域名可配置
由于分包的项目是先编译打包出来的,因此,项目中的接口调用使用的域名也是预定的,所以,如何实现分包域名随着主包域名变化,实现开发、测试、生产同步,是目前困扰到我的。当然,也有以下几个方案,但我仍旧觉得不够完美。
方案一
前端开发可配置页面,手动切换域名。(该页面需隐藏,且每次都需手动切换)
方案二
后端开发接口,此接口不区分环境,由接口返回所需使用的域名