緣由:
uni-app同一套代碼 無法區(qū)分 微信小程序插件 和微信小程序
當(dāng)前項(xiàng)目開發(fā)微信小程序、支付寶小程序、業(yè)務(wù)需求需要開發(fā)微信小程序插件
但是uni-app只能區(qū)分運(yùn)行平臺(tái)微信 支付寶 app等,無法區(qū)分插件和小程序,因此決定自己寫一個(gè)條件預(yù)編譯來區(qū)分。
方案思路：
參考當(dāng)前條件編譯模式，通過自定義腳本將不同平臺(tái)的代碼刪除，保留當(dāng)前符合條件的代碼。
- 將代碼編譯生成新的目錄
- 如何刪除非當(dāng)前條件的代碼
- 如何匹配條件標(biāo)識(shí)開始和結(jié)束
----- 優(yōu)化----- - html js css json文件類型的適配
- 在當(dāng)前平臺(tái)需要支持其他平臺(tái)
- 差量編譯
- 資源文件處理
- 環(huán)境適配
思考1 --- (將代碼編譯生成新的目錄)
目前開發(fā)代碼都是在一個(gè)src目錄下，通過腳本將需要打包的目錄，
遍歷文件 將刪除后的代碼寫入新的目錄
/*
參考系統(tǒng)工具,我們平時(shí)開發(fā)的內(nèi)容代碼,最終也是在另一個(gè)目錄下運(yùn)行;
系統(tǒng)的也是通過將當(dāng)前代碼經(jīng)過編譯 生成對(duì)應(yīng)的平臺(tái)的文件的代碼
*/
思考2 --- (如何刪除非當(dāng)前條件的代碼)
按行讀取文件
我們可以發(fā)現(xiàn),條件標(biāo)識(shí) #ifdef #end結(jié)束等 都是單獨(dú)一行;
所以我們可以通過按行讀取文件的內(nèi)容, 判斷符合#ifdef條件, 并且不是當(dāng)前平臺(tái)的時(shí)候,
下面的每一行開始不再寫入,
直到碰到對(duì)應(yīng)的結(jié)束標(biāo)記,重新在開始寫入.
思考3 --- (如何匹配條件標(biāo)識(shí)開始和結(jié)束)
正則表達(dá)式 判斷
我們可以通過正則表達(dá)式,將當(dāng)前一行判斷是不是符合 #ifdef 微信 || 支付寶|| 插件 等
截取出后面的部分,按照 || 分隔 判斷是否包含當(dāng)前條件 不包含則后面的代碼需要?jiǎng)h除
需要解決的問題就是這幾步!
深度考慮
1. 當(dāng)前平臺(tái)條件編譯有 html js css的代碼
因此我們需要添加配置,將 #ifdef 、/* #ifdef */ 等 根據(jù)不同格式的統(tǒng)一處理,添加所有需要的平臺(tái)的格式的條件標(biāo)識(shí)
2. 在當(dāng)前平臺(tái)需要支持其他平臺(tái)
因?yàn)槲覀兊奈⑿判〕绦虿寮?也是運(yùn)行在微信小程序上的,而我們的小程序和插件是一套代碼, 因此插件編譯的時(shí)候 ,需要支持微信小程序的代碼,
- 因此我們需要對(duì)當(dāng)前平臺(tái) 設(shè)置一個(gè)可以匹配其他平臺(tái)的配置, 在判斷是不是當(dāng)前平臺(tái)同時(shí)也判斷一下符不符合配置的其他條件
優(yōu)化體驗(yàn)
1. 差量編譯
上面的步驟完成后 我們實(shí)際已經(jīng)完成了條件編譯;
但是對(duì)于文件較多的時(shí)候,每次修改一個(gè)文件,重新在編譯生成的,非常耗時(shí)間,也不方便我們調(diào)試.
因此我們做了差量編譯,監(jiān)聽處理變更的文件.
2. 資源文件處理
由于資源文件都在一個(gè)目錄下,并且還有一些不需要編譯的目錄可以直接copy過去的,
在配置文件中 添加不需要區(qū)分條件編譯的相關(guān)目錄,則直接copy.
3. 環(huán)境適配
開發(fā)中 都有開發(fā)環(huán)境,測(cè)試環(huán)境,線上環(huán)境;
我們的小程序有些功能只能在上線才能測(cè)試,因此我們會(huì)發(fā)布兩個(gè)不同id的小程序 一個(gè)用于測(cè)試,一個(gè)用于線上.
對(duì)于區(qū)分開發(fā) 測(cè)試 線上環(huán)境,我們處理方式 也是將
這三種環(huán)境 當(dāng)做 三個(gè)平臺(tái)處理,因?yàn)槲覀兊臈l件平臺(tái)支持配置其他條件平臺(tái);
所以 當(dāng)處理其他條件平臺(tái)的時(shí)候,系統(tǒng)會(huì)自動(dòng)添加當(dāng)前運(yùn)行環(huán)境 到 對(duì)應(yīng)平臺(tái)的適配條件中,
例如 運(yùn)行命令 node build.js weixin dev
則會(huì)在 weixin.coexist中 添加dev 條件 這個(gè)是在運(yùn)行時(shí)添加的
weixin: {
coexist:['dev']
}
附言
下面是一些偽代碼：
function 遞歸遍歷文件夾 {
function 讀取單個(gè)文件 {
for (遍歷文件內(nèi)容 按照行讀取) {
var line = 按行讀取;
if 條件編譯已經(jīng)開始 {
if line == 是條件編譯模式,并且不包含當(dāng)前平臺(tái) {
開始下一行的判斷;
continue;
}
if line == #end {
結(jié)束條件編譯標(biāo)記,重新開始讀寫;
continue;
}
直接進(jìn)入下一行
continue;
}
將line寫入新的文件;
}
}
}
其中 在讀取文件的時(shí)候 使用異步的方式,提高速度,可以縮短一半多的時(shí)間;
對(duì)于異步結(jié)束判斷會(huì)延遲判斷 延遲也會(huì)有一個(gè)標(biāo)記，最后一個(gè)延遲到的時(shí)候，判斷是否結(jié)束 ，
同時(shí)有一個(gè)文件寫入的計(jì)數(shù)，最后只要判斷文件是否在寫入
附件源碼:
直接在 precompile 下面 運(yùn)行
鏈接: https://pan.baidu.com/s/1asmHTc2tZl3cfAmhv_kIMQ 密碼: t35f
