亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Monorepo——大型前端項(xiàng)目的代碼管理方式

ziwenxie / 3679人閱讀

摘要：目前最常見的解決方案是和的特性。具體的使用方法移步官網(wǎng)而使用作為包管理器的同學(xué)，可以在中以字段聲明，就會(huì)以的方式管理。這樣的話，無(wú)論你的包管理器是還是，都能發(fā)揮的優(yōu)勢(shì)要是包管理是，就會(huì)把依賴安裝交給處理。

最近我接手了一個(gè)項(xiàng)目，代碼量比較大、有點(diǎn)復(fù)雜。倉(cāng)庫(kù) clone 下來(lái)代碼有 50+ MB，npm install 安裝完體積飚到了近 2GB …… 熟悉了一下，這個(gè)項(xiàng)目比較復(fù)雜，采用了 monorepo 的方式進(jìn)行代碼的管理。折騰幾天后，對(duì) monorepo 也有個(gè)大概的了解……

Monorepo

Monorepo 是管理項(xiàng)目代碼的一個(gè)方式，指在一個(gè)項(xiàng)目倉(cāng)庫(kù) (repo) 中管理多個(gè)模塊/包 (package)，不同于常見的每個(gè)模塊建一個(gè) repo。

目前有不少大型開源項(xiàng)目采用了這種方式，如 Babel：

How is the repo structured?
The Babel repo is managed as a monorepo that is composed of many npm packages.

還有 create-react-app, react-router 等?？梢钥吹竭@些項(xiàng)目的第一級(jí)目錄的內(nèi)容以腳手架為主，主要內(nèi)容都在 packages 目錄中、分多個(gè) package 進(jìn)行管理。

├── packages
|   ├── pkg1
|   |   ├── package.json
|   ├── pkg2
|   |   ├── package.json
├── package.json

monorepo 最主要的好處是統(tǒng)一的工作流和Code Sharing。比如我想看一個(gè) pacakge 的代碼、了解某段邏輯，不需要找它的 repo，直接就在當(dāng)前 repo；當(dāng)某個(gè)需求要修改多個(gè) pacakge 時(shí)，不需要分別到各自的 repo 進(jìn)行修改、測(cè)試、發(fā)版或者 npm link，直接在當(dāng)前 repo 修改，統(tǒng)一測(cè)試、統(tǒng)一發(fā)版。只要搭建一套腳手架，就能管理（構(gòu)建、測(cè)試、發(fā)布）多個(gè) package。

不好的方面則主要是 repo 的體積較大。特別是，因?yàn)楦鱾€(gè) package 理論上都是獨(dú)立的，所以每個(gè) package 都維護(hù)著自己的 dependencies，而很大的可能性，package 之間有不少相同的依賴，而這就可能使install時(shí)出現(xiàn)重復(fù)安裝，使本來(lái)就很大的 node_modues 繼續(xù)膨脹（我稱這為「依賴爆炸」...）。

基于對(duì)以上的理解，我認(rèn)為當(dāng)項(xiàng)目到一定的復(fù)雜度，需要且可以劃分模塊、但模塊間聯(lián)系緊密的，比較適合用 monorepo 組織代碼。

目前最常見的 monorepo 解決方案是 Lerna 和 yarn 的 workspaces 特性。其中，lerna 是一個(gè)獨(dú)立的包，其官網(wǎng)的介紹是：

a tool that optimizes the workflow around managing multi-package repositories with git and npm.

上面提到的 Babel, create-react-app 等都是用 lerna 進(jìn)行管理的。在項(xiàng)目 repo 中以lerna.json聲明 packages 后，lerna 為項(xiàng)目提供了統(tǒng)一的 repo 依賴安裝 (lerna bootstrap)，統(tǒng)一的執(zhí)行 package scripts (lerna run)，統(tǒng)一的 npm 發(fā)版 (lerna publish) 等特性。對(duì)于「依賴爆炸」的問題，lerna 在安裝依賴時(shí)提供了--hoist選項(xiàng)，相同的依賴，會(huì)「提升」到 repo 根目錄下安裝，但……太雞肋了，lerna 直接以字符串對(duì)比 dependency 的版本號(hào)，完全相同才提升，semver 約定在這并不起作用。

具體的使用方法移步 Lerna 官網(wǎng)：https://lerna.js.org

而使用 yarn 作為包管理器的同學(xué)，可以在 package.json 中以 workspaces 字段聲明 packages，yarn 就會(huì)以 monorepo 的方式管理 packages。相比 lerna，yarn 突出的是對(duì)依賴的管理，包括 packages 的相互依賴、packages 對(duì)第三方的依賴，yarn 會(huì)以 semver 約定來(lái)分析 dependencies 的版本，安裝依賴時(shí)更快、占用體積更??；但欠缺了「統(tǒng)一工作流」方面的實(shí)現(xiàn)。

yarn 官網(wǎng)對(duì) workspace的詳細(xì)說(shuō)明：Workspaces | Yarn

lerna 和 yarn-workspace 并不是只能選其一，大多 monorepo 即會(huì)使用 lerna 又會(huì)在 package.json 聲明 workspaces。這樣的話，無(wú)論你的包管理器是 npm 還是 yarn，都能發(fā)揮 monorepo 的優(yōu)勢(shì)；要是包管理是 yarn ，lerna 就會(huì)把依賴安裝交給 yarn 處理。

再說(shuō)回我那項(xiàng)目呢，安裝依賴后體積實(shí)在是大，折騰了兩天想要優(yōu)化一下，但目前大量腳本嚴(yán)重依賴 npm，我……

還是后面考慮慢慢遷移到 yarn 吧。

Reference

babel/monorepo.md at master · babel/babel

EHOIST_ROOT_VERSION warning hoisting question · Issue #872 · lerna/lerna

Others git-submodule

通過(guò) Git 子模塊，可以在當(dāng)前 repo 中包含其它 repos、作為當(dāng)前 repo 的子目錄使用，同時(shí)能夠保持 repos 之間的獨(dú)立。

# 在當(dāng)前 repo 添加一個(gè)子模塊
git submodule add git@github.com:xxx/xxx.git path/to/xxx

可以在 .gitmodule文件中看到當(dāng)前 repo 有哪些 submodule，分別的 name, branch 等。

# clone 含有 submodule 的 repo 后：
# 初始化 git submodule 信息
git submodule init
# 更新 submodule，相當(dāng)于 git pull 吧
git submodule update

修改子模塊文件后，在當(dāng)前 repo 執(zhí)行 git status 只會(huì)看到有模塊的 changes，而不是具體子模塊文件：

diff --git a/path/to/submodule b/path/to/submodule
--- a/path/to/submodule
+++ b/path/to/submodule
@@ -1 +1 @@
-Subproject commit xxxxxxx
+Subproject commit xxxxxxx-dirty

dirty表示子模塊的修改還不是 commit。如果子模塊的修改 commit 后，這個(gè)改動(dòng)就會(huì)是具體的 commit id。

子模塊的其它 commit, pull 等各操作，還是到其目錄下，按普通 repo 操作即可。

Reference

Git - 子模塊：

https://git-scm.com/book/zh/v...

man git-submodule

git submodules - Git diff says subproject is dirty - Stack Overflow

https://stackoverflow.com/que...

git-bisect

git 有一個(gè)以二分法幫助定位問題的命令——bisect。

# 開始二分查找問題
git bisect start
# 標(biāo)記當(dāng)前有問題
git bisect bad
# 標(biāo)記哪個(gè) commit 或 tag 時(shí)是沒問題的
git bisect good v1.0.0

# 此時(shí) git 會(huì) checkout 兩個(gè)點(diǎn)之間的某個(gè) commit，
# 如果此時(shí)還是有問題：
git bisect bad
# 如果此時(shí)沒有問題：
git bisect good
# 接著 git 會(huì) checkout 下一個(gè)「有問題」和「沒問題」之間的 commit

# 直到定位到問題，git 會(huì)提示：xxxxxxx is first bad commit
Reference

使用 Git 調(diào)試

https://git-scm.com/book/zh/v...

歡迎關(guān)注我的訂閱號(hào)——「車迷與碼農(nóng)」，不定期分享關(guān)于前端、汽車和有趣的事兒~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/109885.html

相關(guān)文章

  • 精讀《Monorepo 的優(yōu)勢(shì)》

    摘要：引言本周精讀的文章是。精讀總的來(lái)說(shuō)，雖然拆分子倉(cāng)庫(kù)拆分子包是進(jìn)行項(xiàng)目隔離的天然方案，但當(dāng)倉(cāng)庫(kù)內(nèi)容出現(xiàn)關(guān)聯(lián)時(shí)，沒有任何一種調(diào)試方式比源碼放在一起更高效。前端精讀幫你篩選靠譜的內(nèi)容。 1. 引言 本周精讀的文章是 The many Benefits of Using a Monorepo。 現(xiàn)在介紹 Monorepo 的文章很多，可以分為如下幾類：直接介紹 Lerna API 的；介紹如何...

    xcc3641 評(píng)論0 收藏0

  • lerna管理package

    摘要：最近發(fā)現(xiàn)公司一個(gè)項(xiàng)目的目錄組織挺奇怪的，所有的子項(xiàng)目都放在了目錄里，還有這種騷操作特意查了下資料，發(fā)現(xiàn)是一種比較流行的項(xiàng)目管理模式。 最近發(fā)現(xiàn)公司一個(gè)項(xiàng)目的目錄組織挺奇怪的，所有的子項(xiàng)目都放在了packages目錄里，還有這種騷操作？特意查了下資料，發(fā)現(xiàn)是一種比較流行的monorepo項(xiàng)目管理模式。近幾年比較火的React,Vue,Babel都是用的這種模式: showImg(http...

    PumpkinDylan 評(píng)論0 收藏0

  • 說(shuō)明Yarn與Lerna管理monorepo使用

    　　 我們先說(shuō)下 Yarn workspace　　首先Yarn workspace 是 Yarn 提供的 monorepo 下，管理依賴的機(jī)制。這就說(shuō)主要對(duì)代碼倉(cāng)庫(kù)下，多個(gè) package 的依賴，進(jìn)行管理：將共同的依賴，做 hosting（提升）。前述這樣就可以有效的防止 package 中的包重復(fù)安裝。 workspace 機(jī)制，會(huì)在根目錄下，統(tǒng)一安裝依賴到 node_module，并生成...

    3403771864 評(píng)論0 收藏0

  • 兩年React老兵的總結(jié) - 如何組織React項(xiàng)目

    摘要：一個(gè)復(fù)雜的應(yīng)用都是由簡(jiǎn)單的應(yīng)用發(fā)展而來(lái)的隨著越來(lái)越多的功能加入項(xiàng)目代碼就會(huì)變得越來(lái)越難以控制本文章主要探討在大型項(xiàng)目中如何對(duì)組件進(jìn)行組織讓項(xiàng)目具備可維護(hù)性系列目錄類型檢查組件的組織樣式的管理組件的思維狀態(tài)管理目錄組件設(shè)計(jì)的基本原則基本原則高 一個(gè)復(fù)雜的應(yīng)用都是由簡(jiǎn)單的應(yīng)用發(fā)展而來(lái)的, 隨著越來(lái)越多的功能加入項(xiàng)目, 代碼就會(huì)變得越來(lái)越難以控制. 本文章主要探討在大型項(xiàng)目中如何對(duì)組件進(jìn)行組...

    hoohack 評(píng)論0 收藏0

  • 簡(jiǎn)單說(shuō)說(shuō) angular.json 文件

    摘要：指向一個(gè)文件，這個(gè)文件描述了所有的字段以及約束。其中一個(gè)項(xiàng)目為一個(gè)子項(xiàng)，如為一個(gè)項(xiàng)目，在創(chuàng)建時(shí)自動(dòng)生成。整個(gè)也有此字段，默認(rèn)生效于所有。默認(rèn)項(xiàng)目，當(dāng)使用一些命令沒有指定項(xiàng)目名稱時(shí)，默認(rèn)指向的項(xiàng)目。 ... 在Angular CLI 6+的版本后，原先的angular-cli.json就被換成了angular.json，而其中里面的字段變化挺大了，如果不了解基本的組成，或者直接把老版本的...

    wangjuntytl 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<