用 lerna 开发及发布 npm package

4,886 阅读2分钟

背景

目前,我司的大部分业务埋点工作还处于手动上报的时代,前端工作量不仅非常大,而且还存在错埋、漏埋的情况,非常浪费开发资源。

为了减少埋点需求的工作量,监控页面的健康度,我们部门讨论后打算制作一个全埋点的前端监控 SDK 及其配套的配置中心。

ps:目前 package 名暂定为 Timestone,仅在公司内部使用,尚未开源~

为了方便 package 的开发和管理,在经过充分的信息检索后,我们决定使用 lerna 来组织项目,下面我会用具体步骤来说明 lerna 是如何使用的。

package 初始化

lerna init

在目标文件夹目录下执行该命令后,会生成以下目录结构

.
├── lerna.json
├── package.json
└── packages

其中:

  1. 它会把 lerna 作为 devDependency 写进 package.json 文件中。
  2. 创建 lerna.json 来存储 lerna 的相关配置信息。

package 开发

lerna create

例如,如果我们需要开发一个新的 package,可以执行如下命令:

lerna create test-package

在输入一系列 test-package 的信息后,我们的目录会变成像下面这样:

.
├── lerna.json
├── package.json
└── packages
    └── test-package
        ├── README.md
        ├── __tests__
        │   └── test-package.test.js
        ├── lib
        │   └── test-package.js
        └── package.json

lerna 会默认帮我们生成好开发 package 的过程中可能用到的各种文件。

package 调试

在开发完你的 package 后,你可能需要将它集成到某个前端项目中去调试,这时候就需要用到下面这个命令了。

npm link

npm link 用于将你的 package 映射的到本地 global 环境中。

  1. 打开 /lerna-demo/packages/test-package
  2. 执行 npm link

在你前端项目中执行 npm link <packageName>,项目中用到的 package 将从本地 global 环境中读取,而不是从项目中的 node_modules 中读取。

  1. 打开你想要集成的前端项目目录,确保该项目中已经添加 @lerna-demo/test-package 依赖
  2. npm link @lerna-demo/test-package

package 发布

lerna publish

运行此命令后,选好每个 package 的新版本号,就可以你的 package 推送到 npm 上面了。

参考链接: