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

news2024/11/13 15:28:16

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开发的脚手架就已经完成了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1480306.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

nodejs配置环境变量后不生效(‘node‘ 不是内部或外部命令,也不是可运行的程序或批处理文件)

一、在我们安装Node.js后&#xff0c;有时候会遇到node命令不管用的情况&#xff0c;关键是在安装时候已经添加配置了环境变量&#xff0c;向下面这样 但是还是不管用&#xff0c;这是因为环境变量配置不正确&#xff0c;权重不够&#xff0c;或者是命令冲突导致&#xff0c;解…

SpringCloud搭建微服务之Consul服务配置

1. 概述 前面有介绍过Consul既可以用于服务注册和发现&#xff0c;也可以用于服务配置&#xff0c;本文主要介绍如何使用Consul实现微服务的配置中心&#xff0c;有需要了解如何安装Consul的小伙伴&#xff0c;请查阅SpringCloud搭建微服务之Consul服务注册与发现 &#xff0c…

人工智能驱动的自拍时代:短视频美颜SDK技术的发展趋势

在短视频自拍的过程中&#xff0c;美颜技术的应用已经成为了许多人的必备工具&#xff0c;其中短视频美颜SDK技术的发展更是推动了自拍时代的进步。 1.人工智能技术的崛起 传统的美颜功能主要是通过简单的图像处理和滤镜效果来实现&#xff0c;但是这种方法往往会导致照片失真…

鉴源论坛 · 观辙丨TLS协议基本原理与Wireshark分析

作者 | 苏少博 上海控安可信软件创新研究院汽车网络安全组 来源 | 鉴源实验室 社群 | 添加微信号“TICPShanghai”加入“上海控安51fusa安全社区” 01 背 景 随着车联网的迅猛发展&#xff0c;汽车已经不再是传统的机械交通工具&#xff0c;而是智能化、互联化的移动终端。然…

YOLOv9有效改进专栏汇总|未来更新卷积、主干、检测头注意力机制、特征融合方式等创新!

YOLOv9有效改进专栏&#xff01; 专栏介绍 YOLOv9作为最新的YOLO系列模型&#xff0c;对于做目标检测的同学是必不可少的。本专栏将针对2024年最新推出的YOLOv9检测模型&#xff0c;使用当前流行和较新的模块进行该进。本专栏于2024年2月29日晚创建&#xff0c;预计四月底前加入…

Python中reduce函数和lambda表达式的学习

reduce函数将一个数据集合&#xff08;链表&#xff0c;元组等&#xff09;中的所有数据进行下列操作&#xff1a;用传给 reduce 中的函数 function&#xff08;有两个参数&#xff09;先对集合中的第 1、2 个元素进行操作&#xff0c;得到的结果再与第三个数据用 function 函数…

HTTPS证书怎么申请?多少钱?

HTTPS证书的申请费用会因多种因素而异&#xff0c;主要包括以下几点&#xff1a; 1. 证书类型&#xff1a; - 域名验证型证书(DV SSL)&#xff1a;这种证书仅验证域名的所有权&#xff0c;申请速度较快&#xff0c;通常用于个人网站或小型项目&#xff0c;价格相对较低&…

SpringCloud微服务-统一网关Gateway

统一网关Gateway 文章目录 统一网关Gateway1、为什么需要网关?2、gateway快速入门3、路由断言工厂Route Predicate Factory4、过滤器工厂-路由过滤器GatewayFilter5、全局过滤器**GlobalFilter**6、各种过滤器的执行顺序7、跨域问题的解决 1、为什么需要网关? 网关与各个服务…

JAVA 反序列化之 Apache Commons Collections 反序列化漏洞分析

Apache Commons Collections 反序列化漏洞是 2015 年影响重大的漏洞之一&#xff0c;同时也开启了各类 java 反序列漏洞的大门&#xff0c;这几年大量各类 java 反序列化漏洞不断出现。java 反序列化漏洞基本一出必高危&#xff0c;风险程度极大&#xff0c;最近研究了一些反序…

找工作的小伙伴有福利了

简历模块 资料说明 ✅内容&#xff1a;300多套简历模块&#xff0c;包含单页简历150套、双页简历15套、三页简历25套、四页简历50套、表格简历15套、自荐信20 套&#xff0c;封面简历、英文简历150 ✅文件格式&#xff1a;word ✅ 文件大小&#xff1a;449MB 资料文件展示 资…

MySQL(基础篇)——多表查询

一.多表关系 一对多(多对一) 多对多一对一 1.一对多(多对一) a.案例&#xff1a;部门与员工的关系 b.关系&#xff1a;一个部门对应多个员工&#xff0c;一个员工对应一个部门 c.实现&#xff1a;在多的一方建立外键&#xff0c;指向一的一方的主键 2.多对多 a.案…

notch 滤波器设计

notch 滤波器是一种用于去除特定频率成分的滤波器&#xff0c;通常用于消除信号中的特定频率的干扰或噪声。也可以与一个系统级联&#xff0c;用于抑制系统谐振峰的影响。 假设 notch 滤波器的下陷频率为 ω c \omega_c ωc​&#xff0c;下陷程度为 d B d o w n dB_{down} …

k8s二进制部署的搭建

1.1 常见k8s安装部署方式 ●Minikube Minikube是一个工具&#xff0c;可以在本地快速运行一个单节点微型K8S&#xff0c;仅用于学习、预览K8S的一些特性使用。 部署地址&#xff1a;Install Tools | Kubernetes ●Kubeadm Kubeadm也是一个工具&#xff0c;提供kubeadm init…

高侧开关芯片四通道 40V 50mΩ车规级带反向电流保护功能负载检测高边开关

概述 PC8845/G是四通道、高侧功率具有集成NMOS功率FET的开关&#xff0c;以及电荷泵。该设备集成了高级 保护功能&#xff0c;例如负载电流限制&#xff0c;通过功率限制进行过载主动管理可配置闩锁关闭的超温停机。全面诊断和高精度电流感应这些功能实现了对负载的智能控制。…

html基础操练和进阶修炼宝典

文章目录 1.超链接标签2.跳锚点3.图片标签4.表格5.表格的方向属性6.子窗口7.音视频标签8.表单9.文件上传10.input属性 html修炼必经之路—各种类型标签详解加展示&#xff0c;关注点赞加收藏&#xff0c;防止迷路哦 1.超链接标签 <!DOCTYPE html> <html lang"en…

「媒体宣传」如何写好新闻稿?

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 写好新闻稿是媒体宣传的关键环节之一&#xff0c;下面是一些关于如何写好新闻稿的建议&#xff1a; 明确新闻稿的目的和受众&#xff1a;在写新闻稿之前&#xff0c;首先要明确新闻稿的目…

在 Rust 中实现 TCP : 1. 联通内核与用户空间的桥梁

内核-用户空间鸿沟 构建自己的 TCP栈是一项极具挑战的任务。通常&#xff0c;当用户空间应用程序需要互联网连接时&#xff0c;它们会调用操作系统内核提供的高级 API。这些 API 帮助应用程序 连接网络创建、发送和接收数据&#xff0c;从而消除了直接处理原始数据包的复杂性。…

一念生花,Coze 结合VisActor 文生图实战总结

前言 词云魔方 逢年过节发送祝福语是中国人特有的礼节&#xff0c;然而准备拜年祝福语也是让人伤透脑筋&#xff0c;大多数人都是拷贝网络上流行的“段子”&#xff0c;改一下名字就发出来了。更有甚者连名字都不改&#xff0c;略显尴尬。 但是如果可以让 AI 总结你想对特定…

18个惊艳的可视化大屏(第十辑):物流运输快递方向

可视化大屏在物流运输行业中具有很大的应用价值&#xff0c;可以帮助企业实现实时监控、路线规划、数据分析、风险预警、服务质量监控和决策支持等目标&#xff0c;提高物流运输效率和安全性&#xff0c;降低成本&#xff0c;提升企业竞争力&#xff0c;贝格前端工场带来的和这…

跨国企业如何选择合格的国际数据业务传输方案

在全球化的商业环境中&#xff0c;跨国企业面临着数据跨境传输的挑战。随着业务的扩展&#xff0c;企业需要在不同国家和地区之间高效、安全地传输大量数据。选择合适的国际数据业务传输方案对于保障数据安全、提高业务效率、遵守法律法规至关重要。 为什么跨国企业需要一个合适…