现如今,随着前端做的事情越来越多,越来越复杂,前端项目也随之复杂化。同时受“只做一件事,并且把他做好”思维的影响,我们期望一个项目能拆分成若干个包,每个包只做一块功能,这样一来,就导致前端包数量急剧膨胀。要开发一个工具或者平台,往往对应好几个包,那么如何优雅高效地管理这些多包项目的研发、构建、发布流程,成了需要解决的问题。
实际上,前端已经有人做出了相应的管理工具 Lerna。
关于 Lerna 的具体使用和内部机制,通过查看官方文档或者搜索相关博客即可找到比较详细的介绍。本文不会重复叙述这些内容,而是从一个实际项目入手,如何利用 Lerna 打造一套适合我们自己脚本工具。
初始化
先全局安装 Lerna:npm i -g lerna
。
依次使用 npm init
、lerna init
初始化项目。
可以看到,在项目根目录下,为我们生成了 lerna.json 文件,其具备配置,可以看官方文档介绍。
很多时候,我们使用的 npm 客户端
并不是 npm
,而可能是 cnpm
等,registry 很可能也是公司私有的,此时我们就需要在 lerna.json 中配置 npmClient
和 registry
了:
{
"package": ["packages/!(demo-*)"],
// independent 表示分开管理各个项目版本
"version": "independent",
"npmClient": "cnpm",
"registry": "[some private registry]"
}
创建包
我们可以在 packages 目录下创建我们的包(lerna create
),每个包中都应当有一个 package.json
文件。
在实际场景中,每个包当中都会有一系列自己的 scripts,包括:
- lint:跑 lint 工具,检查代码是否符合规范;
- build:编译打包;
- test:跑测试代码;
- dev:跑开发环境;
- release:发布;
- ……
每个包也有自己的版本,并且项目中的某一个包能用另外一个包作为依赖。
开发
现在,我们正式开始写代码做事情了。
Lerna 提供了很多命令帮助我们完成研发,具体可以参考官方文档。
实际上,Lerna 的命令还是未覆盖一些场景,比如我们这里的场景是:
- 公司项目,因此要发布到公司 registry,Lerna 目前只支持发布到
npm registry
; - 在执行某些命令的时候,我们需要特殊的“包过滤规则”,比如
lerna run build
,有的包里面可能没有build
脚本,因此我们希望lerna run build
能自动跳过这种包。
对于第一个问题,关键的点是,我们要能知道哪些包发生了变化,只发布变化了的包。
Lerna 为我们提供了 lerna changed
命令,可以找出自从上次打版本标签之后,哪些包发生了变化。
对于第二个问题,我们可以从包的 package.json
中查看是否存在相应脚本来决定是否执行。
由此,我们的发布脚本可以写成这样:
const cp = require('child_process');
function runCommand(cmd) {
console.log(`=== start executing: ${cmd}`);
cp.execSync(cmd, { stdio: 'inherit' });
console.log(`=== finish executing: ${cmd}`);
}
function runScript(scriptName, pkgLocation) {
const pkgJson = require(`${pkgLocation}/package.json`);
// 检查是否存在对应脚本
if (pkgJson.scripts && pkgJson.scripts[scriptName]) {
runCommand(`cd ${pkgLocation} && cnpm run ${scriptName}`);
}
}
const lerna = {
changed() {
return JSON.parse(cp.execSync('lerna changed --json'));
},
list() {
return JSON.parse(cp.execSync('lerna list --json --toposort'));
},
};
// 重新装一下依赖,干净一点
runCommand('lerna clean --yes');
runCommand('lerna bootstrap');
const changedPackages = lerna.changed();
changedPackages.forEach((pkg) => {
// 不理会 private 项目
if (pkg.private) {
return;
}
runScript('lint', pkg.location);
runScript('build', pkg.location);
runScript('test', pkg.location);
});
runCommand('lerna version --allow-branch master');
changedPackages.forEach((pkg) => {
if (pkg.private) {
return;
}
runCommand(`cd ${pkg.location} && cnpm publish`);
});
总结
像这种项目管理工具,不可能做到支持每一个场景。对于我们自己遇到的情况,优先看用工具最简单的形式是否能满足需求;如果不能,再看复杂的命令形式;如果还是不行,就考虑能不能在工具的基础上,加点自己的代码来做做扩展。