Lerna 的使用过程

319 阅读3分钟

Lerna 的学习笔记。关于 Lerna 命令的具体细节请参考官网文档Lerna ,文中只介绍大致的操作流程。


一 Lerna

Lerna 本身是一个脚手架,用来优化基于 git 和 npm 多 package 项目管理的工具。

它的作用是减少重复操作、提高操作的标准化。

举个例子来说,在前端脚手架实现原理一节中,我们介绍了两个 package 的本地调试,使用了 npm link 命令,如果一个大型项目分拆了 30 个 package,那么本地统一调试时,至少需要 npm link 60 次,调试完后还要逐个npm unlink 一遍,然后逐一发布到 npm 网站上,逐一提交到 git 上,更新时还要逐一修改版本号……

考虑到开发过程中的混乱,使用 npm link 的方式,这种几十个 package 的大型工程几乎是不可能完成的。

lerna 的价值及作用由此体现。

二 Lerna 开发流程及命令解释

lerna.png

1 创建 npm 项目

cd lerna-project-test
npm init -y

2 安装 lerna

npm install -g lerna

3 用 lerna 初始化项目。

lerna init

这一步执行后,会在项目的根目录下生成一个 lerna.json 和 packages 文件夹,而且还对项目进行了 git 的初始化。 lerna.json 用来配置 lerna 管理的 package。

lerna-project-test/
  .git/
  packages/
  package.json
  lerna.json

4 创建 package

一般直接通过库名引入库,比如 npm install element-ui,而安装 vue-cli 却是:npm install -g @vue/cli@符号有没有什么特殊的含义?

npm官网上,可以创建一般的Packages, 也可以创建OrganizationsOrganizations用来创建一个工程下有多个独立Package的情况。

// usage: lerna create <name> [location]
lerna create core

依据上文,这句执行后会在 packages 文件夹下创建一个名为core的包。命令运行中也可以填写 package name@xxx/core,对应npm库中的Organizations名称,也可以在建好后修改 package.json 里的 name 属性。 如果不想在默认的packages 文件夹下创建,可以修改 lerna.json 的配置,或者每次使用 lerna create 时带上 [location]。 下面这种配置会直接在跟目录下创建:

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

实验过程在根目录下创建core 和 cli 两个 package,其中 cli 需要引入 core。内容如前端脚手架实现原理; 或者查看源码

目录结构.png

5 安装依赖 可直接将本地的 package 引入。

// usage: lerna add <package>[@version] [--dev] [--exact] [--peer]
// lerna add <package> [loc] --dev
cd cli
lerna add @lerna-project-test/core

6 链接依赖 如果未发布不上线,需要手动将依赖添加到 package.json, 再 link。 lerna link 只用于 package 之间的相互依赖。如果要在本地全局的 node_modules 下生成相应文件,应使用 npm link解决。

cd cli
lerna link [--force-local]

7 清空依赖 / 重装依赖

lerna clean
lerna bootstrap

8 提交至gitee(或github)

9 发布

lerna publish

执行之前先登录 npm,运行npm login。 发布Organizations时默认为 private ,需要在 package.json 中配置:

"publishConfig": {
  "access": "public"
}

执行这一步时,会自动执行 git add package-lock.json,所以如果有 .gitignore,不要将 package-lock.json 写入进去。 有时需要在 package 中加入 LICENSE.md 文件;有时也会遇到连接不上等其他问题,多试几次,每次 publish 时可能都要更改版本号。

npmpackage.png

10 其他操作

// 运行npm命令
lerna run `command`(package.json 中 scripts 属性配置)

// 查看变更
lerna changed
lerna diff

// 修改版本号 
lerna version