背景
目前,我司的大部分业务埋点工作还处于手动上报的时代,前端工作量不仅非常大,而且还存在错埋、漏埋的情况,非常浪费开发资源。
为了减少埋点需求的工作量,监控页面的健康度,我们部门讨论后打算制作一个全埋点的前端监控 SDK 及其配套的配置中心。
ps:目前 package 名暂定为 Timestone,仅在公司内部使用,尚未开源~
为了方便 package 的开发和管理,在经过充分的信息检索后,我们决定使用 lerna 来组织项目,下面我会用具体步骤来说明 lerna 是如何使用的。
package 初始化
lerna init
在目标文件夹目录下执行该命令后,会生成以下目录结构
.
├── lerna.json
├── package.json
└── packages
其中:
- 它会把
lerna
作为devDependency
写进package.json
文件中。 - 创建
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 环境中。
- 打开
/lerna-demo/packages/test-package
- 执行
npm link
在你前端项目中执行 npm link <packageName>
,项目中用到的 package 将从本地 global 环境中读取,而不是从项目中的 node_modules
中读取。
- 打开你想要集成的前端项目目录,确保该项目中已经添加
@lerna-demo/test-package
依赖 npm link @lerna-demo/test-package
package 发布
lerna publish
运行此命令后,选好每个 package 的新版本号,就可以你的 package 推送到 npm 上面了。