uni-pages-hot-modules

github uni-app項目示例

npm包源碼

uni-app的pages.json的模塊化及模塊熱重載

解決uni-app的pages.json無法模塊化的問題，并且解決模塊熱重載和緩存的問題

安裝

npm i uni-pages-hot-modules -S

注意！

發(fā)現(xiàn)uni-app每次更新對pages.js的支持度會不同，比如某個版本竟然注釋掉了對pages.js的熱重載依賴，這里做了兼容。只要uni-app不推翻自己的設(shè)計，此功能長久有效

uni-pages-hot-modules做了什么

// 做了非常輕便的事情，相當(dāng)于
loader.addDependency(modulePath)
delete require.cache[modulePath]
require(modulePath)

uni-app的“彩蛋”

uni-app自帶一個webpack loader鉤子文件pages.js，在項目src目錄下建立pages.js（與pages.json同級）即可生效（pages.json仍然需要存在，作為初始值，建議存放一些和路由無關(guān)的配置）。
pages.js要求CommonJS規(guī)范，直接通過module.exports輸出一個鉤子函數(shù)。

pages.js輸出的函數(shù)參數(shù)

pagesJson < Object >

pages.json的解析內(nèi)容

loader < Object >

uni-pages-loader的鉤子屬性，{ addDependency < Function > }

addDependency

用于手動為uni-pages-loader添加依賴模塊

pages.js的模塊化

由于是js，就可以實現(xiàn)模塊的依賴，如果不考慮模塊的熱重載問題，可以直接使用require引入依賴但是大多數(shù)情況下，需要依賴的模塊也可以通過熱重載更新pages.js，由于不是webpack的標(biāo)準(zhǔn)運行依賴，所以需要手動添加依賴項(使用addDependency)，并且需要每次清除模塊的緩存，因此uni-pages-hot-modules就誕生了

pages.js示例

module.exports=(pagesJson,loader)=>{
    // 需要將loader傳入作為初始化，v0.0.6之后只需要初始化一次
    const hotRequire = require('uni-pages-hot-modules')(loader)
    return {
        "pages": [
            {
                "path": "pages/about/about",
                "style": {
                    "navigationBarTitleText": "測試1"
                }
            },
            ...hotRequire('./module1.js')
        ],
        "subPackages":[{
            "root": "pages/test",
            "pages": [{
                "path": "about",
                "style": {
                    "navigationBarTitleText": "測試"
                }
            }]
        }]
    }
}

模塊的規(guī)范

被加載的模塊也是CommonJS規(guī)范，通過module.exports輸出

module1.js示例

// v0.0.6之后，模塊內(nèi)部使用不再需要提供loader
const hotRequire = require('uni-pages-hot-modules')
module.exports=[
   {
       "path": "pages/sub/sub",
       "style": {
           "navigationBarTitleText": "sub"
       }
   },
   ...hotRequire('./sub-module1.js')
]

其他

不支持條件編譯，需要自己通過process.env.UNI_PLATFORM來判斷，自定義環(huán)境的需要自己添加env變量來判斷
使用uni-pages-hot-modules引入模塊必須輸入全的文件名包括后綴，否則將不會進行熱重載

以上就是uni-app的pages.json處理方案示例的詳細(xì)內(nèi)容，更多關(guān)于uni-app pages.json處理的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論