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

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 ）验证

• 发布完成后，可以本机全局安装我们的 @somegroup/lerna-cli 工具了
• $ npm i -g @somegroup/lerna-cli@latest 或者指定版本号
• 再执行 $ lerna-cli 就可以运行我们的脚手架了
• 这样基于lerna开发的脚手架就已经完成了