使用 Lerna 管理你的项目

现如今,随着前端做的事情越来越多,越来越复杂,前端项目也随之复杂化。同时受“只做一件事,并且把他做好”思维的影响,我们期望一个项目能拆分成若干个包,每个包只做一块功能,这样一来,就导致前端包数量急剧膨胀。要开发一个工具或者平台,往往对应好几个包,那么如何优雅高效地管理这些多包项目的研发、构建、发布流程,成了需要解决的问题。

实际上,前端已经有人做出了相应的管理工具 Lerna

关于 Lerna 的具体使用和内部机制,通过查看官方文档或者搜索相关博客即可找到比较详细的介绍。本文不会重复叙述这些内容,而是从一个实际项目入手,如何利用 Lerna 打造一套适合我们自己脚本工具。

初始化

先全局安装 Lerna:npm i -g lerna

依次使用 npm initlerna init 初始化项目。

可以看到,在项目根目录下,为我们生成了 lerna.json 文件,其具备配置,可以看官方文档介绍。

很多时候,我们使用的 npm 客户端 并不是 npm,而可能是 cnpm 等,registry 很可能也是公司私有的,此时我们就需要在 lerna.json 中配置 npmClientregistry 了:

{
  "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 的命令还是未覆盖一些场景,比如我们这里的场景是:

  1. 公司项目,因此要发布到公司 registry,Lerna 目前只支持发布到 npm registry
  2. 在执行某些命令的时候,我们需要特殊的“包过滤规则”,比如 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`);
});

总结

像这种项目管理工具,不可能做到支持每一个场景。对于我们自己遇到的情况,优先看用工具最简单的形式是否能满足需求;如果不能,再看复杂的命令形式;如果还是不行,就考虑能不能在工具的基础上,加点自己的代码来做做扩展。

推荐阅读更多精彩内容

  • 什么是 NPM npm之于Node,就像pip之于Python,gem之于Ruby,composer之于PHP。 ...
    ihoey阅读 6,029评论 2 36
  • npm是什么 NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具...
    build1024阅读 6,902评论 0 8
  • NPM NPM 是随同 Node 一起安装的包管理工具,能解决 Node 代码部署上的很多问题,常见的使用场景有以...
    heyi_let阅读 2,331评论 0 2
  • 文/巴布亚 三年生俩孩子,第五年回职场的妈妈,心中的五味杂陈,有几人能懂?没有经济压力,谁都不想太拼,但人到中年,...
    当妈不易阅读 177评论 0 0
  • 鸟鸣庭院静, 烟雨柳丝斜。 最是江南好, 湖山树树花。 时节天犹热, 观光伴友归。 湖亭催别宴, 花在满山飞。 山...
    郭大牛阅读 449评论 2 21
  • 今天特别邀请到金老师来给大家做了一场亲子关系沟通!父母们纷纷表示,来到这次沟通的愿望! 怎么让孩子听我的话? 怎么...
    王千二行者阅读 292评论 0 12