[拆弹时刻]分包大作战，主包调用分包资源问题和若干报错处理
[图片]
由于一个项目主包要爆了，但是项目的地址二维码已经出去，不能修改，所以必须将一些JS库移到分包中，在这过程中踩了不少坑。
一些错误提示误导性很强，所以我将遇到的都一一罗列出来。
1、显示component组件引入错误，其实是配置问题
错误提示：VM7771 WAService.js:2 Component is not found in path “packageA/ec-canvas/ec-canvas” (using by “pages/smallTools/token”)(env: Windows,mp,1.05.2109262; lib: 2.14.1)
[图片]
解决方法：
[代码]"usingComponents": {
"ec-canvas": "../../packageA/ec-canvas/ec-canvas",
"mp-msg": "weui-miniprogram/msg/msg"
},
"componentPlaceholder": {
"ec-canvas":"view"
}
[代码]
JSON配置中没有写：<code>componentPlaceholder</code>，这种常常出现在Components引用时候，因为调用异步，所以需要占位！
2、because they are in diffrent subPackages错误提示
这种错误，一般有两种可能性。
（1）引用路径错误，不支持import直接引用
Error: should not require …/…/packageA/ec-canvas/echarts in pages/smallTools/token.js without a callback,
because they are in diffrent subPackages
[图片]
[代码]//比如：
import * as echarts from '../../packageA/ec-canvas/echarts';
[代码]
（2）基础库版本太低，比如2.17.3版本以上
VM10490 WAService.js:2 Please do not register multiple Pages in packageA/smallTools/token.js(env: Windows,mp,1.05.2109262; lib: 2.14.1)
[图片]
[代码]let echarts;
require.async('../../packageA/ec-canvas/echarts.js').then(pkg => {
echarts = pkg;
console.log(pkg);
})
[代码]
出现不支持文档中的 <code> require.async </code>，主要原因是基础库版本过低。
3、主包/分包A调用其他分包B的资源，必须写在function中
VM10490 WAService.js:2 Please do not register multiple Pages in packageA/smallTools/token.js(env: Windows,mp,1.05.2109262; lib: 2.14.1)
[图片]
一般可能是引入方法没有写在function中，而直接头部引用
[代码]//错误位置
require('../subPackageB/utils.js', utils => {
console.log(utils.whoami) // Wechat MiniProgram
})
page({
onLoad(){
//正确位置
}
})
[代码]
4、主包引用分包JS正确的写法（示例）
官方的几个方法都可以，但要注意一些细节，这里展示一个echart图表的实战demo。
[代码]//配置JSON：
{
"navigationBarBackgroundColor": "#1757c4",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": true,
"usingComponents": {
"ec-canvas": "../../packageA/ec-canvas/ec-canvas",
"mp-msg": "weui-miniprogram/msg/msg"
},
//这个一定要写
"componentPlaceholder": {
"ec-canvas":"view"
}
}；
//JS：
let echarts;
page({
async onLoad(){
//注意：要写在方法里面
require('../../packageA/ec-canvas/echarts.js', pkg => {
echarts = pkg;
});
//同步方法
require.async('../commonPackage/index.js').then(pkg => {
echarts = pkg; // 'common'
})
}
})
[代码]
单个JS的引用注意点比较多，其他component直接调用即可。
官方文档地址：
https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html
（和你一样，我用的时候，压根没一个个字仔细看哈~）
如有疑问请留言~
觉得有用，请点个赞哦，让我继续分享更有动力~
