前端架构: 脚手架包管理工具之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           [默认值: ]--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(    "
              报错内容为：The “link” command was removed by default in v7, and is no longer maintained.
              ",    "TODO: description",    yargs => {      yargs.options({        // TODO: options      });    }  );  return parser;}

            • 回到最外层 lerna 目录，尝试连接下：npx lerna link，发现报错
              • 解决方案：https://lerna.js.org/docs/legacy-package-management#replacing-your-usage-of-lerna-bootstraplerna-link
              • npm i -ws 是更新所有 workspaces 中的依赖
              • 使用 $ npm i -ws 这样，三个包都会在 lerna/node_modules/@somegroup 组中会被同步，这样可以替代之前lerna的link命令

                {  "scripts": {    "cli": "lerna-cli"  }}

                • 现在在 lerna/package.json 中的最外层加上一个 cli 的 scripts
                • 执行 $ npm run cli
                • $ npm run cli -v 得到 10.2.3 这里得到的是 npm 的版本
                • 这样，cli 包就可以直接在 lerna 目录下执行了, 验证
                  • 至此，基于 lerna 的脚手架的功能框架完成，目前并没有提供什么实质的功能
                  • 现在，要在 cli 包中使用a包和b包，在 lerna 目录下，执行 $ npm i @somegroup/lerna-a @somegroup/lerna-b -w packages/cli

                  #!/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));

                  • 在 lerna/packages/cli/bin/cli.js 中使用
                  • 使用 lerna 添加测试脚本 $ npx lerna run test 它会把 packages 目录中所有 test 脚本全部执行
                  • 执行 cli，$ npm run cli 可以看到，打印出了a, b包中的方法提供的字符串

                    3 ）测试

                    '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');

                    • 如果要单独测试某个包，比如a包，修改 packages/a/__tests__ 目录下的 a.test.js
                    • 这时候，在 packages/a 下执行 $ npm run test 测试通过
                    • 每个包的版本都要注意同步检查，发布的时候，不要有错误
                    • 同样，packages/* 下的所有包都可以这样修改后，执行测试用例

                      4 ）发布

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

                            5 ）验证

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