Lerna入門之管理TypeScript monorepo教程
Lerna 介紹
這是一篇寫給 Lerna 初學者的文章,在這篇文章我將從零創(chuàng)建一個 TS 項目,并且使用 Lerna 將項目中的多個包發(fā)布到 npm 中
Lerna 是一個使用 git 和 npm 管理多包倉庫的工具,它用于管理具有多個包的 JavaScript 項目。lerna 有兩種模式:fixed 模式和 independent 模式
fixed 模式
fixed 模式是 lerna 的默認模式,在這種模式下,版本被保存到項目根目錄的 lerna.json 文件的 version 字段中。當你運行lerna publish時,如果從上一次發(fā)布之后有模塊被更新了,被更新的模塊將會以新版本發(fā)布,有更新的模塊才會被發(fā)布,沒有更新的模塊不會被發(fā)布(注:如果主版本為 0 或者更新主版本號,會導致所有的模塊都被發(fā)布,不管模塊是否有更新)。在 fixed 模式下你只需要為待發(fā)布的模塊選擇一次版本號,被發(fā)布的模塊的版本號是一樣的。
independent 模式
將 lerna.json 文件的 version 字段設置為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ā)布,管理版本號,根據 commit message 自動生成 changelog,所以需要安裝 git。
開始動手
我要演示的項目中包含了2個包,結構如下:

創(chuàng)建一個名為 leran-ts-demo 的文件夾,在這個文件中執(zhí)行
lerna init
這個命令執(zhí)行完之后,leran-demo 的文件夾中會包含如下的文件:
- /packages
- lerna.json
- package.json
/packages 是一個空文件夾,我將 lerna 要管理的包放在這個文件夾中。
lerna.json 是 lerna 的配置文件,它的內容如下:
{
"packages": [
"packages/*"
],
"version": "0.0.0"
}
Lerna 不會創(chuàng)建 .gitignore,所以我們要自己創(chuàng)建 .gitignore,文件內容下:
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,結果如下:

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

在項目中我們使用 TS 語法寫源代碼,所以需要安裝 typescript,在倉庫的根目錄中運行 lerna add 命令將 typescript 添加到每個包的依賴中
lerna add typescript --dev
由于在所有的包中都使用了 TS,所有我在倉庫中根目錄中創(chuàng)建一個公共的 tsconfig.json,內容如下:
{
"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 腳步,結果如下:

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

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

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

現在,我們已經準備好了項目結構和構建腳本,我將 publish 命令定義到倉庫根目錄的 package.json 中
{
"scripts": {
"publish": "lerna run tsc && lerna publish"
}
}
在倉庫的根目錄運行
npm run publish
Lerna 將指導我們完成發(fā)布過程,在這個過程中我們需要選擇一次包版本,并將 Tag 推送到 Github。如果一切順利,我們將在結尾看到消息:lerna success 發(fā)布了 2 個包。
驗證發(fā)布成功
在命令行運行
npm info request-demo npm info math-demo
你將看到相關 npm 的詳細信息
寫在后面
在這個 demo 中我用的是 leran 的 fixed 模式,你可以改成 independent 模式試試有什么不一樣的地方。
以上就是Lerna入門之管理TypeScript monorepo教程的詳細內容,更多關于Lerna管理TypeScript monorepo的資料請關注腳本之家其它相關文章!
相關文章
JavaScript實現彈出模態(tài)窗體并接受傳值的方法
這篇文章主要介紹了JavaScript實現彈出模態(tài)窗體并接受傳值的方法,涉及JavaScript模態(tài)窗體的實現及基于URL的傳值操作技巧,需要的朋友可以參考下2016-02-02
Firefox/Chrome/Safari的中可直接使用$/$$函數進行調試
偶然發(fā)現的,頁面中沒有引入Prototype和jQuery??刂婆_中敲$卻發(fā)現是一個函數。又試著敲$$,也是個function2012-02-02

