實(shí)現(xiàn)一個(gè)簡(jiǎn)單的模塊管理工具,解決npm拉取業(yè)務(wù)模塊慢的問(wèn)題
使用npm拉取git倉(cāng)庫(kù),速度其實(shí)還是可以接受的.
主要慢的地方在于 postinstall的時(shí)候需要在npm拉取git倉(cāng)庫(kù)的時(shí)候,需要重新構(gòu)建項(xiàng)目代碼.還有一點(diǎn)就是業(yè)務(wù)模塊也有依賴,npm install的時(shí)候也需要重新拉取相同的依賴.
這兩個(gè)步驟其實(shí)是可以省略的,解決的辦法就是可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的模塊管理工具來(lái)替代npm加載業(yè)務(wù)模塊的處理.
創(chuàng)建一個(gè)配置文件
module.exports = {
"Module1": {
"url": "http://xxx1.git",
"moduleName": [
"模塊名稱"
],
"branch": "develop",
"type": "taro"
},
"Module2": {
"url": "http://xxx2.git",
"moduleName": [
"模塊名稱"
],
"branch": "develop",
"type": "taro"
}
}
因?yàn)槊恳粋€(gè)項(xiàng)目都會(huì)用到這一個(gè)文件,把這個(gè)文件放到服務(wù)器上.
在業(yè)務(wù)模塊初始化的時(shí)候,自動(dòng)拉取解析這個(gè)文件.再使用nodejs拉取相應(yīng)的git倉(cāng)庫(kù).
拉取git倉(cāng)庫(kù)
使用download-git-repo拉取git倉(cāng)庫(kù)的代碼放到node_modules目錄下.
這樣在項(xiàng)目中,我就可以引用普通npm一樣引入這個(gè)倉(cāng)庫(kù)的代碼了.
這是download-git-repo的地址與使用方法
https://www.npmjs.com/package/download-git-repo
模擬npm生命周期
代碼拉下來(lái)之后,還需要用postinstall來(lái)構(gòu)建業(yè)務(wù)代碼,
所以需要使用nodejs遍歷以下業(yè)務(wù)模塊的目錄,讀取目錄下的每一個(gè)packages.json.
如果有npm鉤子的,就執(zhí)行一下里面的script.
大致示例代碼如下:
// 示例代碼,僅供參考
const spawn = require('cross-spawn');
const fse = require('fs-extra');
const packageData = fse.readJsonSync('./packages.json');
if (packageData.scripts.preinstall) {
spawn.sync('npm',['run','preinstall']);
}
if (packageData.scripts.postinstall) {
spawn.sync('npm',['run','postinstall']);
}
并發(fā)執(zhí)行業(yè)務(wù)模塊的npm鉤子
在npm執(zhí)行postinstall的時(shí)候,并不是全部一股腦的全部執(zhí)行.
使用 yarn 安裝依賴的時(shí)候,同時(shí)最多可以4個(gè)模塊執(zhí)行(npm install 沒有具體研究).
所以構(gòu)建業(yè)務(wù)模塊的時(shí)候,總是會(huì)出現(xiàn)一個(gè)一個(gè)等的情況.
如果使用自己的模塊管理工具,可以解除這一限制(當(dāng)然,我就是沒有限制).
要是業(yè)務(wù)模塊實(shí)在太多,自己電腦撐不住的話,可以適當(dāng)調(diào)整并發(fā)執(zhí)行npm鉤子的數(shù)量.
使用配置文件自動(dòng)生成index.js
上面我們提到,我們有一個(gè)管理業(yè)務(wù)模塊的配置文件.
有了這個(gè)東西,我們就可以根據(jù)配置文件的內(nèi)容自動(dòng)生成index.js的內(nèi)容了.
import { AppRegistry} from 'react-native';
// 以下內(nèi)容可以根據(jù)配置文件自動(dòng)生成
import Module1 from 'Module1';
import Module2 from 'Module2';
import Module3 from 'Module3';
AppRegistry.registerComponent('Module1', () => Module1);
AppRegistry.registerComponent('Module2', () => Module2);
AppRegistry.registerComponent('Module3', () => Module3);
尾巴
本篇介紹了如何解除npm的限制,快速初始化項(xiàng)目的業(yè)務(wù)模塊.
下一篇,也就是最終章給大家介紹一下我們目前的rn項(xiàng)目業(yè)務(wù)模塊是如何做熱更新的.
業(yè)務(wù)模塊全部解耦,單個(gè)業(yè)務(wù)模塊開發(fā)時(shí),不會(huì)在本地開發(fā)的時(shí)候依賴其他業(yè)務(wù)模塊.
做到獨(dú)立開發(fā),獨(dú)立部署.
