如何實(shí)現(xiàn)一個(gè)簡(jiǎn)易的NpmInstall

本篇文章給大家分享的是有關(guān)如何實(shí)現(xiàn)一個(gè)簡(jiǎn)易的NpmInstall ，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

現(xiàn)在寫代碼我們一般不會(huì)全部自己實(shí)現(xiàn)，更多是基于第三方的包來進(jìn)行開發(fā)，這體現(xiàn)在目錄上就是 src 和 node_modules 目錄。

src 和 node_modules(第三方包) 的比例不同項(xiàng)目不一樣。

運(yùn)行時(shí)查找第三方包的方式也不一樣：

• 在 node 環(huán)境里面，運(yùn)行時(shí)就支持 node_modules 的查找。所以只需要部署 src 部分，然后安裝相關(guān)的依賴。

• 在瀏覽器環(huán)境里面不支持 node_modules，需要把它們打包成瀏覽器支持的形式。

跨端環(huán)境下，它是上面哪一種呢?

都不是，不同跨端引擎的實(shí)現(xiàn)會(huì)有不同，跨端引擎會(huì)實(shí)現(xiàn) require，可以運(yùn)行時(shí)查找模塊(內(nèi)置的和第三方的)，但是不是 node  的查找方式，是自己的一套。

和 node 環(huán)境下的模塊查找類似，但是目錄結(jié)構(gòu)不一樣，所以需要自己實(shí)現(xiàn) xxx install。

思路分析

npm 是有自己的 registry server 來支持 release 的包的下載，下載時(shí)是從 registry server  上下載。我們自己實(shí)現(xiàn)的話沒必要實(shí)現(xiàn)這一套，直接用 git clone 從 gitlab 上下載源碼即可。

依賴分析

要實(shí)現(xiàn)下載就要先確定哪些要下載，確定依賴的方式和打包工具不同：

• 打包工具通過 AST 分析文件內(nèi)容確定依賴關(guān)系，進(jìn)行打包

• 依賴安裝工具通過用戶聲明的依賴文件 (package.json / bundle.json)來確定依賴關(guān)系，進(jìn)行安裝

這里我們把包的描述文件叫做 bundle.json，其中聲明依賴的包：

{     "name": "xxx",     "dependencies": {         "yyyy": "aaaa/bbbb#release/1111"     } }

通過分析項(xiàng)目根目錄的 bundle.json 作為入口，下載每一個(gè)依賴，分析  bundle.json，然后繼續(xù)下載每一個(gè)依賴項(xiàng)，遞歸這個(gè)過程。這就是依賴分析的過程。

這樣依賴分析的過程中進(jìn)行包的下載，依賴分析結(jié)束，包的下載也就結(jié)束了。這是一種可行的思路。

但是這種思路存在問題，比如：版本沖突怎么辦?循環(huán)依賴怎么辦?

解決版本沖突

版本沖突是多個(gè)包依賴了同一個(gè)包，但是依賴的版本不同，這時(shí)候就要選擇一個(gè)版本來安裝，我們可以簡(jiǎn)單的把規(guī)則定為使用高版本的那個(gè)。

解決循環(huán)依賴

包之間是可能有循環(huán)依賴的(這也是為什么叫做依賴圖，而不是依賴樹)，這種問題的解決方式就是記錄下處理過的包，如果同個(gè)版本的包被分析過，那么久不再進(jìn)行分析，直接拿緩存。

這種思路是解決循環(huán)依賴問題的通用思路。

我們解決了版本沖突和循環(huán)依賴的問題，還有沒有別的問題?

版本沖突時(shí)會(huì)下載版本最高的包，但是這時(shí)候之前的低版本的包已經(jīng)下載過了，那么就多了沒必要的下載，能不能把這部分冗余下載去掉。

依賴分析和下載分離

多下載了一些低版本的包的原因是我們?cè)谝蕾嚪治龅倪^程中進(jìn)行了下載，那么能不能依賴分析的時(shí)候只下載 bundle.json  來做分析，分析完確定了依賴圖之后再去批量下載依賴?

從 gitlab 上只下載 bundle.json 這一個(gè)文件需要通過 ssh 協(xié)議來下載，略微復(fù)雜，我們可以用一種更簡(jiǎn)單的思路來實(shí)現(xiàn)：

git clone --depth=1 --branch=bb xxx

加上 --depth 以后 git clone 只會(huì)下載單個(gè) commit，速度會(huì)很快，雖然比不上只下載  bundle.json，但是也是可用的(我試過下載全部 commit 要 20s 的時(shí)候，下載單個(gè) commit 只要 1s)。

這樣我們?cè)谝蕾嚪治龅臅r(shí)候只下載一個(gè) commit 到臨時(shí)目錄，分析依賴、解決沖突，確定了依賴圖之后，再去批量下載，這時(shí)候用 git clone 下載全部的  commit。最后要把臨時(shí)目錄刪除。

這樣，通過分離依賴分析和下載，我們?nèi)サ袅藳]必要的一些低版本包的下載。下載速度會(huì)得到一些提升。

全局緩存

當(dāng)本地有多個(gè)項(xiàng)目的時(shí)候，每個(gè)項(xiàng)目都是獨(dú)立下載自己的依賴包的，這樣對(duì)于一些公用的包會(huì)存在重復(fù)下載，解決方式是全局緩存。

分析完依賴進(jìn)行下載每一個(gè)依賴包的時(shí)候，首先查找全局有沒有這個(gè)包，如果有的話，直接復(fù)制過來，拉取下最新代碼。如果沒有的話，先下載到全局，然后復(fù)制到本地目錄。

通過多了一層全局緩存，我們實(shí)現(xiàn)了跨項(xiàng)目的依賴包復(fù)用。

代碼實(shí)現(xiàn)

為了思路更清晰，下面會(huì)寫偽代碼

依賴分析

依賴分析會(huì)遞歸處理 bundle.json，分析依賴并下載到臨時(shí)目錄，記錄分析出的依賴。會(huì)解決版本沖突、循環(huán)依賴問題。

const allDeps = {}; function installDeps(projectDir) {     const bundleJsonPath = path.resolve(projectDir, 'bundle.json');     const bundleInfo = JSON.parse(fs.readFileSync(bundleJsonPath));          const bundleDeps = bundleInfo.dependencies;     for (let depName in bundleDeps) {         if(allDeps[depName]) {             if (allDeps[depName] 和 bundleDeps[depName] 分支和版本一樣) {                 continue;// 跳過安裝             }             if (allDeps[depName] 和 bundleDeps[depName] 分支和版本不一樣){                 if (bundleDeps[depName] 版本 < allDeps[depName] 版本 ) {                     continue;                 } else {                     // 記錄下版本沖突                     allDeps[depName].conflit = true;                 }                         }         }         childProcess.exec(`git clone --depth=1 ${臨時(shí)目錄/depName}`);         allDeps[depName] = {             name: depName             url: xxx             branch: xxx             version: xxx         }         installDeps(`${臨時(shí)目錄/depName}`);     }     }

下載

下載會(huì)基于上面分析出的 allDeps 批量下載依賴，首先下載到全局緩存目錄，然后復(fù)制到本地。

function batchInstall(allDeps) {     allDeps.forEach(dep => {         const 全局目錄 = path.resolve(os.homedir(), '.xxx');         if (全局目錄/dep.name 存在) {             // 復(fù)制到本地             childProcess.exec(`cp 全局目錄/dep.name 本地目錄/dep.name`);         } else {             // 下載到全局             childProcess.exec(`git clone --depth=1 ${全局目錄/dep.name}`);              // 復(fù)制到本地             childProcess.exec(`cp 全局目錄/dep.name 本地目錄/dep.name`);         }     }); }

這樣，我們就完成了依賴的分析和下載，實(shí)現(xiàn)了全局緩存。

 我們首先梳理了不同環(huán)境(瀏覽器、node、跨端引擎)對(duì)于第三方包的處理方式不同，瀏覽器需要打包，node  是運(yùn)行時(shí)查找，跨端引擎也是運(yùn)行時(shí)查找，但是用自己實(shí)現(xiàn)的一套機(jī)制。

然后明確了打包工具確定依賴的方式是 AST 分析，而依賴下載工具則是基于包描述文件 bundl.json(package.json)  來分析。然后我們實(shí)現(xiàn)了遞歸的依賴分析，解決了版本沖突、循環(huán)依賴問題。

為了減少?zèng)]必要的下載，我們做了依賴分析和下載的分離，依賴分析階段只下載單個(gè) commit，后續(xù)批量下載的時(shí)候才全部下載。下載方式?jīng)]有實(shí)現(xiàn) registry  的那套，而是直接從 gitlab 來 git clone。

為了避免多個(gè)項(xiàng)目的公共依賴的重復(fù)下載，我們實(shí)現(xiàn)了全局緩存，先下載到全局目錄，然后再復(fù)制到本地。

npm install、yarn install  的實(shí)現(xiàn)流程細(xì)節(jié)會(huì)更多一些，但是整體流程類似。希望這篇文章能幫你梳理清楚思路：不同環(huán)境是怎么處理第三方包的，xxx install  的依賴分析和下載的流程是什么樣的。

以上就是如何實(shí)現(xiàn)一個(gè)簡(jiǎn)易的NpmInstall ，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。