工程思想

基于 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

1、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

2、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
{
  "command": {
    "ignoreChanges": [
      "ignored-file",
      "**/__tests__/**",
      "**/*.md",
      "**/tsconfig.json"
    ],
    "publish": {
      "registry""http://localhost:4873"
    },
    "version": {
      "conventionalCommits"true,
      "message""chore(release): publish"
    }
  }
}

你可以改变每个子包的 publishConfig

commitlint & commitizen

请参考我之前的文章 一文搞定规范化 Git Commit

开发流程

install

$ yarn install

package 依赖

给指定 package 安装依赖:

$ yarn workspace module-1 add lodash
# 或者
$ lerna add lodash --scope=module-1

给所有 package 安装依赖:

$ lerna add lodash

workspace 之间的依赖

$ lerna add module-2 --scope module-1

共用的工具依赖

$ yarn add -WD typescript

lerna.json

  • version: 当前仓库的版本,Independent mode 请设置为 independent
  • npmClient: 指定运行命令的客户端程序(默认是 npm)
  • command
    • conventionalCommits: lerna version 会自动决定 version bump 和生成 CHANGELOG 文件
    • ignoreChanges: 一个不包含在 lerna changed/publish 的 glob 数组。使用这个去阻止发布不必要的更新,比如修复 README.md
    • message: 一个 publish 时的自定义 commit 信息。详情请查看@lerna/version
    • registry: 设置自定义的 npm 代理(比如使用 verdaccio 搭建的私服)
    • publish
    • 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"
  }
}

公众号:前端食堂

知乎:童欧巴

掘金:童欧巴

这是一个终身学习的男人,他在坚持自己热爱的事情,欢迎你加入前端食堂,和这个男人一起开心的变胖~

如果你觉得读了本文有收获的话可以点个在看让我看到。阅读过程中有任何问题、想法或者感触也欢迎你在下方留言,也可以在后台回复加群进入食堂的交流群。

沟通创造价值,分享带来快乐。也欢迎你分享给身边有需要的同学,利他就是最好的利己

欢迎加入前端食堂免费知识星球:

每日更新中~提供免费服务给食堂的粉丝们,包括但不限于答疑解惑、大厂内推、经验分享、技术资讯。扫码直达:


多一个点在看

多一条小鱼干



来源: 前端食堂