基于 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"
  }
}
复制代码

本文首发于「洛竹的官方网站」，同步于公众号「洛竹早茶馆」和「掘金专栏」。