uni-pages-hot-modules

github uni-app項(xiàng)目示例

npm包源碼

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

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

安裝

npm i uni-pages-hot-modules -S

注意！

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

uni-pages-hot-modules做了什么

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

uni-app的“彩蛋”

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

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

pagesJson < Object >

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

loader < Object >

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

addDependency

用于手動(dòng)為uni-pages-loader添加依賴(lài)模塊

pages.js的模塊化

由于是js，就可以實(shí)現(xiàn)模塊的依賴(lài)，如果不考慮模塊的熱重載問(wèn)題，可以直接使用require引入依賴(lài)但是大多數(shù)情況下，需要依賴(lài)的模塊也可以通過(guò)熱重載更新pages.js，由于不是webpack的標(biāo)準(zhǔn)運(yùn)行依賴(lài)，所以需要手動(dòng)添加依賴(lài)項(xiàng)(使用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": "測(cè)試1"
                }
            },
            ...hotRequire('./module1.js')
        ],
        "subPackages":[{
            "root": "pages/test",
            "pages": [{
                "path": "about",
                "style": {
                    "navigationBarTitleText": "測(cè)試"
                }
            }]
        }]
    }
}

模塊的規(guī)范

被加載的模塊也是CommonJS規(guī)范，通過(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')
]

其他

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

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

最新評(píng)論