解决uni-app的pages.json的模块化及模块热重载

前言

由于业务需要，需要在原有的系统上再衍生出一套相同的系统，也就是一套代码多个系统，这就需要考虑到page.json中page项要动态生成，方便我们后期去维护（当然考虑的不止这一点，这里只针对page.json文件来讲）。

uni-app的"彩蛋"

uni-app自带一个webpack loader钩子文件page.js，在项目src目录下建立page.js（与pages.json同级）即可生效（pages.json仍然需要存在，作为初始值，建议存放一些和路由无关的配置）。pages.js要求CommonJS规范，直接通过module.exports输出一个钩子函数。

pages.js的模块化

由于是js，就可以实现模块的依赖，如果不考虑模块的热重载问题，可以不使用hot高阶函数，但是大多数情况下，需要依赖的模块也可以通过热重载更新pages.js，由于不是webpack的标准运行依赖，所以需要手动添加依赖项（使用addDependency），并且需要每次清除模块的缓存，因此uni-pages-hot-modules就诞生了。

安装

npm i uni-pages-hot-modules -S

pages.js示例

const { hot } = require('uni-pages-hot-modules')
module.exports = hot((pagesJson) => {
    let basePages = []
    let baseSubPackages = []

    return {
        // 合并pages.json的内容
        ...pagesJson,
        pages:[
            ...basePages,
            ...require('./page_modules/tabbar.js'),
            ...require('./page_modules/component.js'),
            ...require('./page_modules/appPlus.js'),
            ...require('./page_modules/module1.js')
        ],
        // 分包配置
        subPackages:[
            ...baseSubPackages,
            ...require('./subpackage_modules/api.js'),
            ...require('./subpackage_modules/extUI.js'),
            ...require('./subpackage_modules/template.js')
        ]
    }
})

模块的规范（被加载的模块也是CommonJS规范，通过module.exports输出）

module1.js示例

module.exports=[
   {
       "path": "pages/sub/sub",
       "style": {
           "navigationBarTitleText": "sub"
       }
   },
   // 在模块里继续引入其他子模块
   ...require('./some-sub-module1.js')
]