前端架构: 脚手架包管理工具之lerna的全流程开发教程

news2024/9/21 14:34:20

Lerna

1 ）文档

Lerna 文档
- https://www.npmjs.com/package/lerna
- https://lerna.js.org [请直达这个链接]
使用 Lerna 帮助我们做包管理，并不复杂，中间常用的命令并不是很多
这里是命令直达：https://lerna.js.org/docs/api-reference/commands

2 ）使用

现在我们开始使用 Lerna, 首先创建目录 lerna
安装并查看 lerna 版本 $ npx lerna -v 这里没有安装，会自动安装 lerna
目前lerna的版本是8.1.2
在 lerna 这个目录下执行 $ npx lerna init
这时候，项目初始化完成了，就会多处一个 lerna.json 这个是lerna配置文件
现在基于 lerna 创建 a包 $ npx lerna create a 一路回车
现在出现了 packages/a 包，里面有一系列配置
同workspace使用一致，在使用a的时候，把a加到分组中, 修改 a/package.json中的name
"name":"@somegroup/lerna-a", 并且把 a/lib/a.js 修改成 a/lib/index.js
同步 a/package.json 中 "main": "lib/index.js", 同时修改成ESM的形式 "type":"module"

修改 a/lib/index.js 的代码

'use strict';

export default function() {
  return 'Hello from a';
}

这样，a包就调试好了, 可以在 lerna/package.json 中看到
```
"workspaces": [
  "packages/*"
],
```
- 这里的worksapces 使用了通配符*的方式
不同于 npm的workspace添加依赖的方式，lerna提供的方式是：$ npx lerna add -h
注意，这里 The “add” command was removed by default in v7, and is no longer maintained.
所以，新提供的方式是： https://lerna.js.org/docs/legacy-package-management#replacing-your-usage-of-lerna-add
现在给a包添加chalk依赖: $ npm i chalk -w @somegroup/lerna-a 注意这里a包的name变化了，所以安装方式也要如此
这里，a包就绪之后，就可以着手创建b包了，在创建的时候，可以看下一些辅助参数 $ npx lerna create -h

可以看到常用的有

--access        When using a scope, set publishConfig.access value                        [可选值: "public", "restricted"] [默认值: public]
--bin           Package has an executable. Customize with --bin <executableName>          [默认值: <name>]
--es-module     Initialize a transpiled ES Module                                         [布尔]

这样，在创建b包的时候，就可以这样 $ npx lerna create b --access public 回车，注意name配置为：@somegroup/lerna-b
创建 cli 包的时候，就可以这样 $ npx lerna create cli --access public --bin --es-module 回车，注意name配置为：@somegroup/lerna-cli
对于b包
- 修改 b/lib/b.js 为 b/lib/index.js, 同时修改 b/package.json 中的 "main": "lib/index.js" 和 "type": "module"
  - 注意，这里和 cli包的区别在于生成b包的时候 --es-module 没有添加，所以要手动添加这个 "type": "module"
- 修改 b/lib/index.js 的内容
```
'use strict';

export default function () {
  return 'Hello from b';
}
```

对于 cli 包

修改 cli/package.json 中的 bin属性为："bin": { "lerna-cli": "bin/cli.js" }, main属性 "main":"src/cli.js"

修改 cli/bin/cli.js 中

#!/usr/bin/env node

'use strict';

import cli from '../src/cli.js';

cli().parse(process.argv.slice(2));

修改 src/cli.js

import factory from 'yargs/yargs';

export default function cli(cwd) {
  const parser = factory(null, cwd);

  parser.alias('h', 'help');
  parser.alias('v', 'version');

  parser.usage(
    "$0",
    "TODO: description",
    yargs => {
      yargs.options({
        // TODO: options
      });
    }
  );

  return parser;
}

回到最外层 lerna 目录，尝试连接下：npx lerna link，发现报错
- 报错内容为：The “link” command was removed by default in v7, and is no longer maintained.
- 解决方案：https://lerna.js.org/docs/legacy-package-management#replacing-your-usage-of-lerna-bootstraplerna-link
使用 $ npm i -ws 这样，三个包都会在 lerna/node_modules/@somegroup 组中会被同步，这样可以替代之前lerna的link命令
- npm i -ws 是更新所有 workspaces 中的依赖
现在在 lerna/package.json 中的最外层加上一个 cli 的 scripts
```
{
  "scripts": {
    "cli": "lerna-cli"
  }
}
```
执行 $ npm run cli
这样，cli 包就可以直接在 lerna 目录下执行了, 验证
- $ npm run cli -v 得到 10.2.3 这里得到的是 npm 的版本
至此，基于 lerna 的脚手架的功能框架完成，目前并没有提供什么实质的功能
现在，要在 cli 包中使用a包和b包，在 lerna 目录下，执行 $ npm i @somegroup/lerna-a @somegroup/lerna-b -w packages/cli

在 lerna/packages/cli/bin/cli.js 中使用

#!/usr/bin/env node

'use strict';

import cli from '../src/cli.js';
import a from '@somegroup/lerna-a';
import b from '@somegroup/lerna-b';

console.log(a());
console.log(b());

cli().parse(process.argv.slice(2));

执行 cli，$ npm run cli 可以看到，打印出了a, b包中的方法提供的字符串

3 ）测试

使用 lerna 添加测试脚本 $ npx lerna run test 它会把 packages 目录中所有 test 脚本全部执行

如果要单独测试某个包，比如a包，修改 packages/a/__tests__ 目录下的 a.test.js

'use strict';

import a from '../lib/index.js';
import assert from 'assert';

const { strict } = assert;

assert.strictEqual(a(), 'Hello from a');
console.info('a tests passed');

这时候，在 packages/a 下执行 $ npm run test 测试通过
同样，packages/* 下的所有包都可以这样修改后，执行测试用例

4 ）发布

发布前的再次检查
- 每个包的版本都要注意同步检查，发布的时候，不要有错误
- 发布的配置检查，在 package.json 中 "publishConfig": { "access": "public" } 都要有
- 提交代码到远程仓库后(必须)
所有事项准备完成，就可以执行发布的流程了，执行 $ npx lerna publish
- 这里有步骤，可以选择下一个版本，填入必要信息或选项
- 选择之后，本地packages下包的每个版本都会帮忙升级，非常方便

5 ）验证