首页
学习
活动
专区
圈层
工具
发布
50 篇文章
1
【架构师(第一篇)】整体需求分析和架构设计
2
【架构师(第二篇)】脚手架架构设计和框架搭建
3
【架构师(第三篇)】脚手架开发之掌握Lerna操作流程
4
【架构师(第四篇)】脚手架开发之Lerna源码分析
5
【架构师(第五篇)】脚手架之import-local执行流程及简历设计
6
【架构师(第六篇)】脚手架之需求分析和架构设计
7
【架构师(第七篇)】脚手架之准备阶段编写
8
【架构师(第八篇)】脚手架之 commander 框架使用方法
9
【架构师(第九篇)】如何让 Node 环境支持 ES Module
10
【架构师(第十篇)】脚手架之注册命令及架构优化
11
【架构师(第十一篇)】脚手架之命令注册和执行过程开发
12
【架构师(第十二篇)】脚手架之命令行交互工具 inquirer.js 使用方法
13
【架构师(第十三篇)】脚手架之创建项目准备阶段开发
14
【架构师(第十四篇)】脚手架之 egg.js 和 mongodb 的使用
15
【架构师(第十五篇)】脚手架之创建项目模板开发
16
【架构师(第十六篇)】脚手架之创建项目模板的下载与更新
17
【架构师(第十七篇)】脚手架之 ejs 和 glob 的使用
18
【架构师(第十八篇)】脚手架之项目模板的安装
19
【架构师(第十九篇)】脚手架之组件库模板开发
20
【架构师(第二十篇)】脚手架之自定义模板及第一阶段总结
21
【架构师(第二十一篇)】编辑器开发之需求分析和架构设计
22
【架构师(第二十二篇)】编辑器开发之项目整体搭建
23
【架构师(第二十三篇)】编辑器开发之画布区域组件的渲染
24
【架构师(第二十四篇)】编辑器开发之添加模版到画布
25
【架构师(第二十五篇)】编辑器开发之属性编辑区域表单渲染
26
【架构师(第二十六篇)】编辑器开发之属性编辑同步渲染
27
【架构师(第二十七篇)】前端单元测试框架 Jest 基础知识入门
28
【架构师(第二十八篇)】 测试工具 Vue-Test-Utils 基础语法
29
【架构师(第二十九篇)】Vue-Test-Utils 触发事件和异步请求
30
【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
31
【架构师(第三十一篇)】前端测试之 TDD 的开发方式
32
【架构师(第三十二篇)】 通用上传组件开发及测试用例
33
【架构师(第三十三篇)】 Vue 中的实例及本地图片预览
34
【架构师(第三十四篇)】 业务组件库开发之 vue3 的插件系统
35
【架构师(第三十五篇)】 业务组件库开发之使用 Rollup 进行打包
36
【架构师(第三十六篇)】 业务组件库开发之发布到 NPM
37
【架构师(第三十七篇)】 服务端开发之后端框架与数据库技术选型
38
【架构师(第三十八篇)】 服务端开发之本地安装最新版 MySQL 数据库
39
【架构师(第三十九篇)】 服务端开发之连接 MySQL 数据库
40
【架构师(第四十篇)】 服务端开发之连接 Mongodb 数据库
41
【架构师(第四十一篇)】 服务端开发之安装并连接 Redis数据库
42
【架构师(第四十二篇)】 服务端开发之常用的登录鉴权方式
43
【架构师(第四十三篇)】 服务端开发之单元测试和接口测试
44
【架构师(第四十四篇)】 服务端开发之 pm2 和 nginx 介绍
45
【架构师(第四十五篇)】 服务端开发之认识 Github actions
46
【架构师(第四十六篇)】 服务端开发之安装 Docker
47
【架构师(第四十七篇)】 服务端开发之认识 Docker
48
【架构师(第四十八篇)】 服务端开发之 Dockerfile
49
【架构师(第四十九篇)】 服务端开发之认识 Docker-compose
50
【架构师(第五十篇)】 服务端开发之自动发布到测试机
清单首页架构文章详情

【架构师(第三篇)】脚手架开发之掌握Lerna操作流程


Lerna简介

Lerna 是一个优化基于 git + npm 的多 package 项目的管理工具

官网

👉👉 Lerna官方网站

解决原生脚手架开发痛点

Package 越多,管理的复杂度越高。

痛点一:重复操作

  • Package 本地 link
  • Package 依赖安装
  • Package 单元测试
  • Package 代码提交
  • Package 代码发布

痛点二:版本一致性

  • 发布时版本一致性
  • 发布后相互依赖版本升级

优点

Lerna 是架构优化的产物,它揭示了一个架构真理:项目复杂度提升后,就需要对项目进行架构优化。架构优化的主要目标往往都是以效能为核心。

  • 大幅减少重复操作
  • 提升操作的标准化

Lerna 开发脚手架的流程

基于lerna搭建脚手架框架

创建 npm 组织

进入 npm 官网,点击头像,然后点击 + Add Organization

输入组织名,然后点击 create

下一步直接点 skip 就行了,忘了截图了。

然后我们就有了一个组织,这样才可以把包发到 npm 上并且不用担心命名重复的问题

脚手架项目初始化

新建目录 /imoc-cli-deve/imoc-cli-deve

初始化仓库

代码语言:javascript
复制
npm init -y

全局安装 lerna

代码语言:javascript
复制
npm i -D lerna
npm i -g lerna

查看版本

代码语言:javascript
复制
lerna -v

如何正常显示版本就可以用了

然后当我执行 lerna init 的时候,出现了下面的错误。

查阅资料,最终的解决方案是不要使用 cmd 去执行,使用 git bash 去执行就可以了。

现在的目录结构应该是这样

代码语言:javascript
复制
imoc-cli-deve
  packages/
  package.json
  lerna.json

learn 自动给我们生成了一个 lerna.json 文件,以及一个 packages 目录

代码语言:javascript
复制
// lerna.json
{
  "packages": [
    "packages/*"
  ],
  "version": "1.0.0" // 修改一下版本
}

然后我们根目录下手动创建一个 .gitignore 文件

代码语言:javascript
复制
// .gitignore
.history
.vscode
node_modules
packages/**/node_modules
lerna-debug.log

创建 package

通过下面命令创建一个可以被 lerna 管理的 package

代码语言:javascript
复制
lerna create <name>

执行完会让你输入一些东西,修改一下包名和描述即可,其他的直接回车跳过,后面会手动改。

lerna 会自动在 package 目录下生成下面这些东西

代码语言:javascript
复制
└── packages
   └── core
      ├── lib
      |  └── core.js
      ├── package.json
      ├── README.md
      └── __tests__
         └── core.test.js

以同样的方式再创建一个 utils 包存放一些工具

给 package 安装依赖

通过下面的命令给指定的 package 安装依赖

代码语言:javascript
复制
lerna add <package> [loc]

如果不指定 package ,那么就会给所有的包同时安装依赖

通过下面的命令清空安装的依赖

代码语言:javascript
复制
lerna clean 

通过下面的命令重装依赖

代码语言:javascript
复制
lerna bootstrap 

下面命令是给 packages/core 这个 package 安装 @imooc-cli/utils 这个依赖

代码语言:javascript
复制
lerna add @imooc-cli/utils packages/core/

lerna link

以下命令用来将所有 lerna 管理的 package 进行相互 link

代码语言:javascript
复制
lerna link

修改 packages/core 中的依赖,添加 @imoc-cli-deve/utils

代码语言:javascript
复制
// package.json
  "dependencies": {
    "@imoc-cli-deve/utils": "^1.0.0"
  }

然后执行 lerna link 命令

这个时候我们查看 packages/core 下的 node_modules 中的 utils 包,会发现有个小箭头,就说明 link 成功了。

lerna exec

以下命令用来给所有 lerna 管理的 package 执行 command

代码语言:javascript
复制
lerna exec -- <command>

下面是删除所有 package 中的 node_modules 文件夹

代码语言:javascript
复制
lerna exec -- rm -rf node_modules

下面是删除指定包 @imoc-cli-deve/core 下的 node_modules 文件夹

代码语言:javascript
复制
lerna exec --scope @imoc-cli-deve/core -- rm -rf node_modules

lerna run

以下命令用来给所有 lerna 管理的 package 执行一个 npm 脚本(如果存在的话),就是 package.jsonscripts 属性中的内容。

代码语言:javascript
复制
lerna run <script>

下面是执行所有 package 中的 test 脚本

代码语言:javascript
复制
lerna run test

下面是执行指定包 @imoc-cli-deve/core 中的 test 脚本

代码语言:javascript
复制
lerna run --scope @imoc-cli-deve/core test

脚手架发布上线

以下命令用来查看自上次发布后,哪些 lerna 管理的 package 发生了变更

代码语言:javascript
复制
lerna changed

另外两个命令需要我们先提交代码

代码语言:javascript
复制
git add .
git commit -m "lerna"

以下命令用来查看自上次发布后,哪些 lerna 管理的 package 的内容发生了变更

代码语言:javascript
复制
lerna diff

gitee 上新建一个代码仓库

然后执行以下指令连接远程仓库

代码语言:javascript
复制
git remote add origin https://gitee.com/hzw_0174/imoc-cli-deve.git // 连接远程仓库
git remote -v // 查看连接状态
git push origin master --set-upstream  // 设置默认分支推送代码

以下命令用来升级 lerna 管理的 package 的版本

代码语言:javascript
复制
lerna diff

通常情况下我们只需要 Patch Minor Major 当中进行选择。

以下命令用来发布 lerna 管理的 packagenpm 仓库。

代码语言:javascript
复制
lerna publish

也是会让你选择版本,如果你没有执行过 lerna version ,然后我们选择第一个,输入 y

发现最后报了一个错误

代码语言:javascript
复制
lerna ERR! E402 You must sign up for private packages

是因为没有登录,执行 npm login ,输入用户名密码登录

然后在 core 这个 package 里面添加 bin/index 文件,修改 package.json

代码语言:javascript
复制
// bin/index
#! /usr/bin/env node
console.log('hello imoc-cli')

// package.json
 "bin": {
    "imoc-cli-deve": "bin/index.js"
  },

然后修改所有 packagepackage.json

代码语言:javascript
复制
// package.json
  "publishConfig": {
    "registry": "https://registry.npmjs.org/",
    "access": "public"
  },

最后把所有 package.jsonlerna.json 的版本号统一到最新版本,这是因为虽然我们之前的几次操作发不到 npm 失败了,但是 gitee 仓库已经打上 tag 了,再次发布就会报错。

然后再次执行 lerna publish

会显示成功推送两个包,然后去 npm 官网上看一下是否成功了

可以看到已经存在了,并且版本都是 1.0.4 , 到这里一个完整的 lerna 发布流程就结束了。

下一篇
举报
领券