前端架构: 脚手架包管理工具之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开发的脚手架就已经完成了

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习--神经网络基础

神经网络 人工神经网络&#xff08; Artificial Neural Network &#xff0c; 简写为 ANN &#xff09;也简称为神经网络&#xff08; NN &#xff09;&#xff0c;是一种模仿生物神经网络结构和 功能的计算模型 。人脑可以看做是一个生物神经网络&#xff0c;由众多的 神经元…

刷题第2天(中等题):LeetCode59--螺旋矩阵--考察模拟能力(边界条件处理)

LeetCode59: 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,2,3],[8,9,4],[7,6,5]]示例 2&#xff1a; 输入&#xff1a…

高刷显示器 - HKC VG253KM

&#x1f525;&#x1f525; 今天来给大家揭秘一款电竞神器 - HKC VG253KM 高刷电竞显示器&#xff01;这款显示器可是有着雄鹰展翅般的设计灵感&#xff0c;背后的大鹏展翅鹰翼图腾让人过目难忘。那么&#xff0c;这款显示器到底有哪些过人之处呢&#xff1f;一起来看看吧&…

Automated Testing for LLMOps 01:使用CircleCI进行持续集成CI

Automated Testing for LLMOps 这是学习https://www.deeplearning.ai/short-courses/automated-testing-llmops/ 这门课的笔记 Learn how LLM-based testing differs from traditional software testing and implement rules-based testing to assess your LLM application. …

2024年腾讯云4核8G12M配置的轻量服务器同时支持多大访问量?

腾讯云4核8G服务器支持多少人在线访问&#xff1f;支持25人同时访问。实际上程序效率不同支持人数在线人数不同&#xff0c;公网带宽也是影响4核8G服务器并发数的一大因素&#xff0c;假设公网带宽太小&#xff0c;流量直接卡在入口&#xff0c;4核8G配置的CPU内存也会造成计算…

深入理解网络通信基本原理和tcp/ip协议

深入理解网络通信基本原理和tcp/ip协议 一、计算机网络体系1&#xff0c;计算机网络体系结构2&#xff0c;网络中数据传输2.1&#xff0c;浏览器中输入一个url的执行流程2.2&#xff0c;数据在网络中是的传输流程 3&#xff0c;三次握手和四次挥手3.1&#xff0c;三次握手3.1.1…

推荐一款桌面端redis连接工具, redis desktop manager替代品——another redis desktop manager

下载地址 Another Redis Desktop Manager | 更快、更好、更稳定的Redis桌面(GUI)管理客户端&#xff0c;兼容Windows、Mac、Linux&#xff0c;性能出众&#xff0c;轻松加载海量键值 封面对比 对比redis desktop manager &#xff0c;ui上有巨大的改进 但是redis desktop ma…

【基于Ubuntu20.04的Autoware.universe安装过程】方案一:虚拟机 | 详细记录 | Vmware | 全过程图文 by.Akaxi

目录 一、Autoware.universe背景 二、虚拟机配置 三、Ubuntu20.04安装 四、GPU显卡安装 五、ROS2-Galactic安装 六、ROS2-dev-tools安装 七、rmw-implementation安装 八、pacmod安装 九、autoware-core安装 十、autoware universe dependencies安装 十一、安装pre-c…

如何使用固定公网地址远程访问本地RStudio Server【内网穿透】

文章目录 前言1. 安装RStudio Server2. 本地访问3. Linux 安装cpolar4. 配置RStudio server公网访问地址5. 公网远程访问RStudio6. 固定RStudio公网地址 前言 RStudio Server 使你能够在 Linux 服务器上运行你所熟悉和喜爱的 RStudio IDE&#xff0c;并通过 Web 浏览器进行访问…

CentOS7如何使用Docker部署Wiki.Js知识库并实现公网远程访问?

文章目录 1. 安装Docker2. 获取Wiki.js镜像3. 本地服务器打开Wiki.js并添加知识库内容4. 实现公网访问Wiki.js5. 固定Wiki.js公网地址 不管是在企业中还是在自己的个人知识整理上&#xff0c;我们都需要通过某种方式来有条理的组织相应的知识架构&#xff0c;那么一个好的知识整…

Leetcoder Day29| 贪心算法part03

1005.K次取反后最大化的数组和 给定一个整数数组 A&#xff0c;我们只能用以下方法修改该数组&#xff1a;我们选择某个索引 i 并将 A[i] 替换为 -A[i]&#xff0c;然后总共重复这个过程 K 次。&#xff08;我们可以多次选择同一个索引 i。&#xff09; 以这种方式修改数组后&a…

2024年国际生物发酵展全面揭秘-赛尼格磁电

参展企业介绍 北京赛尼格磁电科技有限公司是一家中加合资的专业的永磁系统生产商。 2001年成立于北京。公司专业从事磁性材料的应用及除铁器的研发、设计及制造。精良的加工设备&#xff0c;精细的产品制作&#xff0c;为我们满足东南亚、欧洲、北美、南美及国内各大企业的产…

(转载)SpringCloud 微服务(三)-Seata解决分布式事务问题

ps:这个原文写的很好&#xff0c;怕后续这个地址失效&#xff0c;备份一个留着自己学习 转自&#xff1a;SpringCloud 微服务&#xff08;三&#xff09;-Seata解决分布式事务问题_seata 黑马 代码-CSDN博客 看完了黑马程序员的免费课程&#xff0c;感觉受益匪浅&#xff0c;…

TypeScript+React Web应用开发实战

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 在现代Web开发中&#xff0c;React和TypeScrip…

【Qt学习】QLineEdit 控件 属性与实例(登录界面,验证密码,正则表达式)

文章目录 1. 介绍2. 实例使用2.1 登录界面2.2 对比两次密码是否相同2.3 通过按钮显示当前输入的密码&#xff08;并对2.2进行优化&#xff09;2.4 结语 3. 正则表达式3.1 QRegExp3.2 验证输入内容 4. 资源代码 1. 介绍 关于 QLineEdit 的详细介绍&#xff0c;可以去查阅官方文…

C++:模版初阶 | STL简介

创作不易&#xff0c;感谢支持&#xff01;&#xff01; 一、泛型编程思想 如何实现一个通用的交换函数呢&#xff1f; 注&#xff1a;其实swap函数在C的标准库提供了&#xff0c;不需要自己写&#xff0c;这边只是举个例子 void Swap(int& left, int& right) { in…

HTML+CSS+JS:花瓣登录组件

效果演示 实现了一个具有动态花朵背景和简洁登录框的登录页面效果。 Code <section><img src"./img/background.jpeg" class"background"><div class"login"><h2>Sign In</h2><div class"inputBox"…

PDF Expert for Mac v3.9.2中文激活版下载

PDF Expert for Mac是一款易于使用的 PDF 编辑器和注释器&#xff0c;专为 Mac 设备设计。它允许用户轻松查看、编辑、签名、注释和共享 PDF。该软件使用户能够向他们的 PDF 添加文本、图像、链接和形状&#xff0c;突出显示和标记文本&#xff0c;填写表格以及签署数字文档。它…

type may not be empty [type-empty]

Git提交失败原因分析 原因是使用了规范commit信息的工具&#xff0c;你的提交信息不符合规范&#xff0c;所以被拒绝了 commit规范工具 commitlinthusky 我这个项目使用husky&#xff0c;提交规范比较严格。 解决方式一&#xff1a; 修改提交信息&#xff0c; 使其符合规范…

【探索AI】十一 深度学习之第1周:深度学习概述与基础

深度学习概述与基础 深度学习的发展历史与现状神经网络的基本原理前向传播与反向传播算法常见的激活函数与优化算法深度学习框架&#xff08;如TensorFlow或PyTorch&#xff09;进行基础操作 深度学习的发展历史与现状 深度学习的发展历史可以追溯到上世纪40年代&#xff0c;当…