Lerna 介紹

這是一篇寫(xiě)給 Lerna 初學(xué)者的文章，在這篇文章我將從零創(chuàng)建一個(gè) TS 項(xiàng)目，并且使用 Lerna 將項(xiàng)目中的多個(gè)包發(fā)布到 npm 中

Lerna 是一個(gè)使用 git 和 npm 管理多包倉(cāng)庫(kù)的工具，它用于管理具有多個(gè)包的 JavaScript 項(xiàng)目。lerna 有兩種模式：fixed 模式和 independent 模式

fixed 模式

fixed 模式是 lerna 的默認(rèn)模式，在這種模式下，版本被保存到項(xiàng)目根目錄的 lerna.json 文件的 version 字段中。當(dāng)你運(yùn)行lerna publish時(shí)，如果從上一次發(fā)布之后有模塊被更新了，被更新的模塊將會(huì)以新版本發(fā)布，有更新的模塊才會(huì)被發(fā)布，沒(méi)有更新的模塊不會(huì)被發(fā)布（注：如果主版本為 0 或者更新主版本號(hào)，會(huì)導(dǎo)致所有的模塊都被發(fā)布，不管模塊是否有更新）。在 fixed 模式下你只需要為待發(fā)布的模塊選擇一次版本號(hào)，被發(fā)布的模塊的版本號(hào)是一樣的。

independent 模式

將 lerna.json 文件的 version 字段設(shè)置為independent，這會(huì)讓 lerna 運(yùn)行在 independent 模式下，independent 模式需要開(kāi)發(fā)者單獨(dú)修改每個(gè)待發(fā)布模塊的版本號(hào)。

前置條件

全局安裝 Lerna

npm install -g lerna

NPM

在這個(gè) demo 中，我使用 Lerna 將包發(fā)布到 npm 公有庫(kù)中，所以需要到www.npmjs.com創(chuàng)建一個(gè) npm 賬戶(hù).

GIT

Lerna 依賴(lài) git 檢查文件改動(dòng)，自動(dòng)發(fā)布，管理版本號(hào)，根據(jù) commit message 自動(dòng)生成 changelog，所以需要安裝 git。

開(kāi)始動(dòng)手

我要演示的項(xiàng)目中包含了2個(gè)包，結(jié)構(gòu)如下：

創(chuàng)建一個(gè)名為 leran-ts-demo 的文件夾，在這個(gè)文件中執(zhí)行

lerna init

這個(gè)命令執(zhí)行完之后，leran-demo 的文件夾中會(huì)包含如下的文件：

• /packages
• lerna.json
• package.json

/packages 是一個(gè)空文件夾，我將 lerna 要管理的包放在這個(gè)文件夾中。

lerna.json 是 lerna 的配置文件，它的內(nèi)容如下：

{
  "packages": [
    "packages/*"
  ],
  "version": "0.0.0"
}

Lerna 不會(huì)創(chuàng)建 .gitignore，所以我們要自己創(chuàng)建 .gitignore，文件內(nèi)容下：

node_modules/
lerna-debug.log
npm-debug.log
packages/*/lib
.idea

創(chuàng)建包

在這個(gè) demo 中，lerna 要管理的包是：math-demo 和 request-demo，通過(guò)lerna create命令創(chuàng)建包。在倉(cāng)庫(kù)的根目錄中運(yùn)行 lerna create math-demo，結(jié)果如下：

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

在項(xiàng)目中我們使用 TS 語(yǔ)法寫(xiě)源代碼，所以需要安裝 typescript，在倉(cāng)庫(kù)的根目錄中運(yùn)行 lerna add 命令將 typescript 添加到每個(gè)包的依賴(lài)中

lerna add typescript --dev

由于在所有的包中都使用了 TS，所有我在倉(cāng)庫(kù)中根目錄中創(chuàng)建一個(gè)公共的 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 之后，我們還需要給每個(gè)包創(chuàng)建它自己的 tsconfig.json，如下：

{
 "extends": "../../tsconfig.json",
 "compilerOptions": {
   "outDir": "./lib"
 },
 "include": [
   "./src"
 ]
}

在為每個(gè)包添加 tsconfig.json 之后，我還為每個(gè)包創(chuàng)建了 src 目錄，src 目錄中保存這個(gè)包的 TS 源文件，為了讓 TS 文件能夠被編譯成 JS 文件，我還在每個(gè)包中的 package.json 中定義的 tsc 腳步，結(jié)果如下：

在倉(cāng)庫(kù)中根目錄下運(yùn)行

lerna run tsc

上面的命令會(huì)運(yùn)行所有包中的 tsc 腳本

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

這些對(duì)我們來(lái)說(shuō)非常重要，因?yàn)樗鼈兛刂浦男┪募⒈煌扑偷絅PM，也決定了我們 npm 包的入口。

將代碼托管到 gitHub

在 gitHub 創(chuàng)建一個(gè)倉(cāng)庫(kù)，并且將本地的倉(cāng)庫(kù)與遠(yuǎn)程倉(cāng)庫(kù)關(guān)聯(lián)

將包發(fā)布到 npm 上

我已經(jīng)有一個(gè) npm 賬戶(hù)了，現(xiàn)在我只需要在終端上登錄 npm

現(xiàn)在，我們已經(jīng)準(zhǔn)備好了項(xiàng)目結(jié)構(gòu)和構(gòu)建腳本，我將 publish 命令定義到倉(cāng)庫(kù)根目錄的 package.json 中

{
 "scripts": {
   "publish": "lerna run tsc && lerna publish"
 }
}

在倉(cāng)庫(kù)的根目錄運(yùn)行

npm run publish

Lerna 將指導(dǎo)我們完成發(fā)布過(guò)程，在這個(gè)過(guò)程中我們需要選擇一次包版本，并將 Tag 推送到 Github。如果一切順利，我們將在結(jié)尾看到消息:lerna success 發(fā)布了 2 個(gè)包。

驗(yàn)證發(fā)布成功

在命令行運(yùn)行

npm info request-demo
npm info math-demo

你將看到相關(guān) npm 的詳細(xì)信息

寫(xiě)在后面

在這個(gè) demo 中我用的是 leran 的 fixed 模式，你可以改成 independent 模式試試有什么不一樣的地方。

以上就是Lerna入門(mén)之管理TypeScript monorepo教程的詳細(xì)內(nèi)容，更多關(guān)于Lerna管理TypeScript monorepo的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論