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

Lerna

1 )文档

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 的代码

    js 复制代码
    'use strict';
    
    export default function() {
      return 'Hello from a';
    }
  • 这样,a包就调试好了, 可以在 lerna/package.json 中看到

    js 复制代码
    "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

  • 可以看到常用的有

    shell 复制代码
    --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 的内容

      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 中

      js 复制代码
      #!/usr/bin/env node
      
      'use strict';
      
      import cli from '../src/cli.js';
      
      cli().parse(process.argv.slice(2));
    • 修改 src/cli.js

      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,发现报错

  • 使用 $ npm i -ws 这样,三个包都会在 lerna/node_modules/@somegroup 组中会被同步,这样可以替代之前lerna的link命令

    • npm i -ws 是更新所有 workspaces 中的依赖
  • 现在在 lerna/package.json 中的最外层加上一个 cli 的 scripts

    js 复制代码
    {
      "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 中使用

    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

    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开发的脚手架就已经完成了
相关推荐
前端爆冲8 分钟前
项目中无用export的检测方案
前端
热爱编程的小曾36 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin1 小时前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox