开发环境
react:^17.0.0
Taro:v3.2.8
node:v14.15.0
TS:v4.1.0
其它...
项目是基于 Taro 框架创建的 react 项目。
参考文档
下面自己弄得目录结构,与官方文档有所出入,所以将文档放前面,可以先看看。
开始分包
总的来说,主要分三步修改。
- 修改目录结构,不同包对应的文件放不同目录模块下。
app.config.ts
文件配置subpackages
属性。- 修改页面中跳转链接。
下面以举例的方式来说明。假如,项目中有以下一些页面。
- Home(首页,tabBar1)
- QRCode(扫一扫,tabBar2)
- Mine (我的,tabBar3)
- DeviceList (设备列表页面)
- DeviceDetail (设备详情页面)
- 设备相关其它页面...
- AnimalList (生物列表页面)
- AnimalDetail(生物详情页面)
- 生物相关其它页面...
- 其它页面...
比如说,我们可以将设备相关的页面单独分出一个包,生物相关的页面单独分出一个包。
修改目录结构,不同包对应的文件放不同目录模块下。
分包前:
src/pages
|-Home
|-QrCode
|-Mine
|
|-DeviceList
|-DeviceDetail
|-设备其它相关页面...
|
|-AnimalList
|-AnimalDetail
|-生物其它相关页面...
|
|-其它...
分包后:
src/pages
|-Home
|-QrCode
|-Mine
|
|-moduleDevice
| |-DeviceList
| |-DeviceDetail
| |-其它设备相关页面
|
|-moduleAnimal
| |-AnimalList
| |-AnimalDetail
| |-其它生物相关页面
|
|-其它...
包名可随意命名,但需要注意两点
- app.config.ts 文件中的配置与这里的包名保持一致。
- 页面中页面的跳转,也需要跟这里的包名保持一致。
app.config.ts
文件配置 subpackages
属性。
分包前:
export default {
pages: [
// tabbar - 首页
'pages/Home/index',
// tabbar - 扫一扫
'pages/QrCode/index',
// tabbar - 个人
'pages/Mine/index',
// 生物列表
'pages/AnimalList/index',
// 生物详情
'pages/AnimalDetail/index',
// 设备列表
'pages/DeviceList/index',
// 设备详情
'pages/DeviceDetail/index',
// 其它页面...
],
};
分包后:
export default {
pages: [
// tabbar - 首页
'pages/Home/index',
// tabbar - 扫一扫
'pages/QrCode/index',
// tabbar - 个人
'pages/Mine/index',
// 其它页面...
],
subpackages: [
{
root: 'pages/moduleAnimal/',
pages: [
// 生物列表
'AnimalList/index',
// 生物详情
'AnimalDetail/index',
// 其它生物相关的页面...
],
},
{
root: 'pages/moduleDevice/',
pages: [
// 设备列表
'DeviceList/index',
// 设备详情
'DeviceDetail/index',
// 其它设备相关的页面...
],
},
],
};
修改页面中跳转链接。
分包前:
Taro.navigateTo({
url: '/pages/DeviceList/index',
});
分包后:
Taro.navigateTo({
url: '/pages/moduleDevice/DeviceList/index',
});
注意事项
以下两个分包原则,直接 Ctrl+C/V
官方文档下的。严格遵循即可。
打包原则
- 声明
subpackages
后,将按subpackages
配置路径进行打包,subpackages
配置路径外的目录将被打包到主包中。 - 主包也可以有自己的
pages
,即最外层的pages
字段。 subpackage
的根目录不能是另外一个subpackage
内的子目录。tabBar
页面必须在主包内。
引用原则
packageA
无法 requirepackageB
JS 文件,但可以 require 主包、packageA
内的 JS 文件;使用 分包异步化 时不受此条限制。packageA
无法 importpackageB
的 template,但可以 require 主包、packageA
内的 template。packageA
无法使用packageB
的资源,但可以使用主包、packageA
内的资源。