Lerna入門之管理TypeScript monorepo教程
Lerna 介紹
這是一篇寫給 Lerna 初學(xué)者的文章,在這篇文章我將從零創(chuàng)建一個 TS 項目,并且使用 Lerna 將項目中的多個包發(fā)布到 npm 中
Lerna 是一個使用 git 和 npm 管理多包倉庫的工具,它用于管理具有多個包的 JavaScript 項目。lerna 有兩種模式:fixed 模式和 independent 模式
fixed 模式
fixed 模式是 lerna 的默認模式,在這種模式下,版本被保存到項目根目錄的 lerna.json 文件的 version 字段中。當(dāng)你運行lerna publish時,如果從上一次發(fā)布之后有模塊被更新了,被更新的模塊將會以新版本發(fā)布,有更新的模塊才會被發(fā)布,沒有更新的模塊不會被發(fā)布(注:如果主版本為 0 或者更新主版本號,會導(dǎo)致所有的模塊都被發(fā)布,不管模塊是否有更新)。在 fixed 模式下你只需要為待發(fā)布的模塊選擇一次版本號,被發(fā)布的模塊的版本號是一樣的。
independent 模式
將 lerna.json 文件的 version 字段設(shè)置為independent,這會讓 lerna 運行在 independent 模式下,independent 模式需要開發(fā)者單獨修改每個待發(fā)布模塊的版本號。
前置條件
全局安裝 Lerna
npm install -g lerna
NPM
在這個 demo 中,我使用 Lerna 將包發(fā)布到 npm 公有庫中,所以需要到www.npmjs.com創(chuàng)建一個 npm 賬戶.
GIT
Lerna 依賴 git 檢查文件改動,自動發(fā)布,管理版本號,根據(jù) commit message 自動生成 changelog,所以需要安裝 git。
開始動手
我要演示的項目中包含了2個包,結(jié)構(gòu)如下:

創(chuàng)建一個名為 leran-ts-demo 的文件夾,在這個文件中執(zhí)行
lerna init
這個命令執(zhí)行完之后,leran-demo 的文件夾中會包含如下的文件:
- /packages
- lerna.json
- package.json
/packages 是一個空文件夾,我將 lerna 要管理的包放在這個文件夾中。
lerna.json 是 lerna 的配置文件,它的內(nèi)容如下:
{
"packages": [
"packages/*"
],
"version": "0.0.0"
}
Lerna 不會創(chuàng)建 .gitignore,所以我們要自己創(chuàng)建 .gitignore,文件內(nèi)容下:
node_modules/ lerna-debug.log npm-debug.log packages/*/lib .idea
創(chuàng)建包
在這個 demo 中,lerna 要管理的包是:math-demo 和 request-demo,通過lerna create命令創(chuàng)建包。在倉庫的根目錄中運行 lerna create math-demo,結(jié)果如下:

重復(fù)上面的過程創(chuàng)建 request-demo,創(chuàng)建完成之后目錄結(jié)構(gòu)如下:

在項目中我們使用 TS 語法寫源代碼,所以需要安裝 typescript,在倉庫的根目錄中運行 lerna add 命令將 typescript 添加到每個包的依賴中
lerna add typescript --dev
由于在所有的包中都使用了 TS,所有我在倉庫中根目錄中創(chuàng)建一個公共的 tsconfig.json,內(nèi)容如下:
{
"compilerOptions": {
"module": "commonjs",
"declaration": true,
"noImplicitAny": false,
"removeComments": true,
"noLib": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es6",
"sourceMap": true,
"lib": [
"es6"
]
},
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
創(chuàng)建完公共的 tsconfig.json 之后,我們還需要給每個包創(chuàng)建它自己的 tsconfig.json,如下:
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "./lib"
},
"include": [
"./src"
]
}
在為每個包添加 tsconfig.json 之后,我還為每個包創(chuàng)建了 src 目錄,src 目錄中保存這個包的 TS 源文件,為了讓 TS 文件能夠被編譯成 JS 文件,我還在每個包中的 package.json 中定義的 tsc 腳步,結(jié)果如下:

在倉庫中根目錄下運行
lerna run tsc
上面的命令會運行所有包中的 tsc 腳本

如果一切順利,我們將把 TS 文件從 src 文件夾編譯到每個包的 lib 文件夾中。我們看一下每個包 package.json 中的 directories, files, typings, publishConfig 和 main 屬性:

這些對我們來說非常重要,因為它們控制著哪些文件將被推送到NPM,也決定了我們 npm 包的入口。
將代碼托管到 gitHub
在 gitHub 創(chuàng)建一個倉庫,并且將本地的倉庫與遠程倉庫關(guān)聯(lián)
將包發(fā)布到 npm 上
我已經(jīng)有一個 npm 賬戶了,現(xiàn)在我只需要在終端上登錄 npm

現(xiàn)在,我們已經(jīng)準備好了項目結(jié)構(gòu)和構(gòu)建腳本,我將 publish 命令定義到倉庫根目錄的 package.json 中
{
"scripts": {
"publish": "lerna run tsc && lerna publish"
}
}
在倉庫的根目錄運行
npm run publish
Lerna 將指導(dǎo)我們完成發(fā)布過程,在這個過程中我們需要選擇一次包版本,并將 Tag 推送到 Github。如果一切順利,我們將在結(jié)尾看到消息:lerna success 發(fā)布了 2 個包。
驗證發(fā)布成功
在命令行運行
npm info request-demo npm info math-demo
你將看到相關(guān) npm 的詳細信息
寫在后面
在這個 demo 中我用的是 leran 的 fixed 模式,你可以改成 independent 模式試試有什么不一樣的地方。
以上就是Lerna入門之管理TypeScript monorepo教程的詳細內(nèi)容,更多關(guān)于Lerna管理TypeScript monorepo的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript實現(xiàn)彈出模態(tài)窗體并接受傳值的方法
這篇文章主要介紹了JavaScript實現(xiàn)彈出模態(tài)窗體并接受傳值的方法,涉及JavaScript模態(tài)窗體的實現(xiàn)及基于URL的傳值操作技巧,需要的朋友可以參考下2016-02-02
Firefox/Chrome/Safari的中可直接使用$/$$函數(shù)進行調(diào)試
偶然發(fā)現(xiàn)的,頁面中沒有引入Prototype和jQuery。控制臺中敲$卻發(fā)現(xiàn)是一個函數(shù)。又試著敲$$,也是個function2012-02-02
javascript獲取網(wǎng)頁各種高寬及位置的方法總結(jié)
下面小編就為大家?guī)硪黄猨avascript獲取網(wǎng)頁各種高寬及位置的方法總結(jié)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
javascript html 靜態(tài)頁面?zhèn)鲄?shù)
靜態(tài)頁面中用js獲取頁面參數(shù)的一些屬性方法,具體的獲取參數(shù),可以搜索本站以前的一些文章。2009-04-04

