基於 lerna 的多包 JavaScript 項目搭建維護

你們好，我是洛竹🎋，一隻住在杭城的木系前端 🧚🏻‍♀️，若是你喜歡個人文章 📚，能夠經過點贊幫我彙集靈力 ⭐️。

將大型代碼倉庫分割成多個獨立版本化的 軟件包（package）對於代碼共享來講很是有用。可是，若是某些更改 跨越了多個代碼倉庫的話將變得很麻煩而且難以跟蹤，而且，跨越多個代碼倉庫的測試將迅速變得很是複雜。

爲了解決這些（以及許多其它）問題，某些項目會將 代碼倉庫分割成多個軟件包（package），並將每一個軟件包存放到獨立的代碼倉庫中。可是，例如 Babel、 React、Angular、Ember、Meteor、Jest 等項目以及許多其餘項目則是在 一個代碼倉庫中包含了多個軟件包（package）並進行開發。

Lerna 是一種工具，針對 使用 git 和 npm 管理多軟件包代碼倉庫的工做流程進行優化。

開始

全局安裝 lerna

$ npm install lerna -g
複製代碼

初始化 lerna 項目

$ lerna init --independent
複製代碼

你的代碼倉庫目前應該是以下結構：

lerna-repo/
  packages/
  package.json
  lerna.json
複製代碼

建立 package

$ lerna create module-1
$ lerna create module-2
複製代碼

yarn workspaces & Lerna Hoisting

使用 yarn workspaces 結合 Lerna useWorkspaces 能夠實現 Lerna Hoisting。這並非畫蛇添足，這可讓你在統一的地方（根目錄）管理依賴，這即節省時間又節省空間。

配置 lerna.json:

{
  ...
  "npmClient": "yarn",
  "useWorkspaces": true
}
複製代碼

頂級 package.json 必須包含一個 workspaces 數組:

{
  "private": true,
  ...
  "workspaces": ["packages/*"]
}
複製代碼

npm registry

搭建 verdaccio

verdaccio 是一個開源輕量的 npm 私服

全局安裝：

$ npm install verdaccio -g
複製代碼

配置 ~/.config/verdaccio/config.yaml uplinks:

---
# a list of other known repositories we can talk to
uplinks:
  npmjs:
    url: https://registry.npmjs.org/
  taobao:
    url: https://registry.npm.taobao.org/
  tuya:
    url: https://registry-npm.tuya-inc.top/
複製代碼

設置開機自啓動

0、run sudo npm i -g pm2

一、run pm2 start verdaccio & pm2 startup

outputs:

[PM2] Init System found: launchd
[PM2] To setup the Startup Script, copy/paste the following command:
sudo env PATH=$PATH:/usr/local/bin /usr/local/lib/node_modules/pm2/bin/pm2 startup launchd -u luozhu --hp /Users/luozhu
複製代碼

二、run sudo env PATH=$PATH:/usr/local/bin /usr/local/lib/node_modules/pm2/bin/pm2 startup launchd -u luozhu --hp /Users/luozhu

outputs:

[PM2] Freeze a process list on reboot via:
$ pm2 save

[PM2] Remove init script via:
$ pm2 unstartup launchd
複製代碼

修改 lerna publishConfig

// lerna.json
{
  "ignoreChanges": [
    "ignored-file",
    "**/__tests__/**",
    "**/*.md"
  ],
  "command": {
    "publish": {
      "registry": "http://localhost:4873"
    },
    "version": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}
複製代碼

注意：若是子包是帶 scope 的，須要爲子包設置 publishConfig.access

commitlint & commitizen

請參考我以前的文章 一文搞定規範化 Git Commit

開發流程

install

$ yarn install
複製代碼

package 依賴

給指定 package 安裝依賴：

# 或者（推薦）
$ lerna add lodash packages/module-1
# 或者
$ lerna add lodash --scope=module-1
# 或者
$ lerna add lodash **/module-1
# 或者
$ yarn workspace module-1 add lodash
複製代碼

給全部 package 安裝依賴：

$ lerna add lodash
複製代碼

workspace 之間的依賴

$ lerna add module-2 --scope module-1
# 或者
$ lerna add module-2 packages/module-1
複製代碼

共用的工具依賴

$ yarn add -WD typescript
複製代碼

lerna.json

• version: 當前倉庫的版本，Independent mode 請設置爲 independent
• npmClient: 指定運行命令的客戶端程序（默認是 npm）
• ignoreChanges: 一個不包含在 lerna changed/publish 的 glob 數組。使用這個去阻止發佈沒必要要的更新，好比修復 README.md
• command
  • publish
    • registry：設置自定義的 npm 代理（好比使用 verdaccio 搭建的私服）
    • conventionalCommits：lerna version 會自動決定 version bump 和生成 CHANGELOG 文件
    • message：一個 publish 時的自定義 commit 信息。詳情請查看@lerna/version

npm scripts

{
  "scripts": {
    "release:beta": "lerna publish --canary --pre-dist-tag=beta --preid=beta --yes",
    "release:rc": "lerna publish prerelease --pre-dist-tag=rc --preid=rc",
    "release:next": "lerna publish prerelease --pre-dist-tag=next --preid=next",
    "release:preminor": "lerna publish preminor --pre-dist-tag=next --preid=next",
    "release:premajor": "lerna publish premajor --pre-dist-tag=next --preid=next",
    "release": "lerna publish",
    "release:minor": "lerna publish minor",
    "release:major": "lerna publish major",
    "commit": "git cz"
  }
}
複製代碼

本文首發於「洛竹的官方網站」，同步於公衆號「洛竹早茶館」和「掘金專欄」。