rush + pnpm + ts + monorepo 脚手架开发之环境篇二

·  阅读 2913

rush 是巨硬团队出品的提供一个仓库下维护多个项目的构建和发布方案, 更多信息请参考官网。 虽然目前官网只有英文文档,大家不要担心,这里在给大家推荐一个好用的翻译工具deepl,该工具基于深度学习开发,我们以 rush 官网首页第一段摘要为例,看一下翻译效果:

image.png

安装

npm install -g @microsoft/rush
复制代码

安装完后,推荐大家花个3分钟时间把官网的 demo 在本地跑一遍,能大大加深对rush的理解。

项目迁移

项目初始化

我们开始把用上一篇文章 rush + pnpm + ts + menorepo 脚手架开发之环境篇一 里用 pnpm 搭建的 menorepo框架迁移到 rush。 在 demo 的同级目录新建个文件夹 rush,执行 rush初始化命令

rush init
复制代码

执行拷贝命令把 menorepo 文件夹下两个子项目utilscore拷贝到新建的rush文件夹里

cp -R ./../menorepo/packages
复制代码

image.png

修改 rush.json文件,在 projects里新增 coreutils 项目配置信息

 "projects": [
    {
      "packageName": "core",  // 项目名称
      "projectFolder": "packages/core", // 项目地址  
      "reviewCategory": "tools", // 包类型
      "shouldPublish": true // 是否发布
    },
    {
      "packageName": "utils",
      "projectFolder": "packages/utils",
      "reviewCategory": "tools",
      "shouldPublish": true
    }
 ]

复制代码

repository字段里添加项目仓库地址

"url": "https://github.com/microsoft/rush-example", // 换成自己项目的仓库链接
"defaultBranch": "master", // 设置 diff 的目标分支, 默认就是 master
"defaultRemote": "origin"  
复制代码

这里填写项目仓库的链接,后面每次发布新版本之前,rush 都会拿当前版本和远程 master 分支做 diff,并让作者填写 change log,方便后期追溯维护。

rush 默认的包管理器是 pnpm,如果要换成 npm 或者 yarn 需要手动更改

链接本地库文件

切换到 core 项目目录下,执行

rush add -p utils // -p 表示添加本地库,后面接库名称
复制代码

core 重新引用 utils

如果我们想让所有子项目都引用 utils,可以加参数 -all

rush add -p utils -all
复制代码

安装远程库还是使用 pnpm add packageName 即可

依赖安装

rush update
复制代码

在我们第一次 clone 代码到本地,或者手动修改了 package.json 里面的依赖,都可以通过该命令进行依赖更新、安装

打包

rush bulild
复制代码

rush 里,不管在哪个目录,只要项目配置了 build 命令,那么执行 rush build的时候,所有项目都会执行打包命令

image.png

这里我们第一次执行 build 的时候,出现了警告,原因是我们没有装 @types/node 的声明文件,这里安装下 @types/node

 pnpm i @types/node --filter core --filter utils -D
复制代码

rush 里,我们所有安装的依赖都默认存放在 rush/common/temp 目录下, 由 rush 🙆‍♂统一维护管理

image.png

所有子目录的依赖都是通过 硬链接 的方式进行引用,所以开发者不用担心重复安装包的问题。

安装完后,再重新运行打包命令 rush build

image.png

之前的报错信息消失了。

更多打包功能

rush build 默认会打包所有项目, 我们可以通过参数配置来实现更多功能。

  • 场景一 只想打包 core这个项目,可以执行
rush build -o core
复制代码
  • 场景二 当修改了 utils 这个基础库,我们希望依赖该库的所有项目(包括 utils)都重新打包,可以执行
rush build -i utils
复制代码
  • 场景三 只想打包 corecore的依赖,可以执行
rush build -t core
复制代码

同理,我们在上文执行的 rush add -p utils 链接本地库文件,也可以通过添加参数的方式,来给指定的项目添加依赖。

发布

为了模拟 迭代 -> 发布 的日常开发流程,先把之前的代码提交到仓库

// rush
git init
git add .
git commit -m "init"
git remote add origin git@github.com:GongJS/rush-demo.git // 换成自己的仓库地址即可
git push origin master
复制代码

再分别修改 coreutilsindex.ts 文件

// rush/packages/core/index.ts
import { log } from 'utils'

const core = () => {
    console.log('core change') // 新增
    log.info('test', 'Hello world!')
}

export default core

// rush/packages/utils/src/index.ts
import log from 'npmlog'
log.level = process.env.LOG_LEVEL ? process.env.LOG_LEVEL : 'info'

log.heading = 'js-cli'
log.addLevel('success', 2000, {fg: 'green', bold: true})

console.log('utils changed') // 新增
export { log }

复制代码

然后重新打包并提交

rush build
git add .
git commit -m "test rush publish"
复制代码

执行 rush change,这时候会和远程分支进行 diff, 并要去开发者填写变更记录

image.png

其中,majorminorpatch 分别对应大中小三个版本的改动,后续升级版本的时候会更新对应的版本数字,这里选择 patch,升级小版本。

common/changes记录着此次的变更记录。

执行

rush publish --apply
复制代码

消费刚才的变更记录

image.png

image.png

image.png

命令执行成功之后,我们可以看到,对应包的版本也都进行了相应的升级。

最后,在正式发布时,我们得添加一下要发布的源地址,在项目根目录下新建一个.npmrc-publish文件

touch .npmrc-publish
复制代码

文件内容

registry=https://registry.npmjs.org // npm
复制代码

然后再执行

rush publish -p --include-all -n <替换成你的 npm TOKEN>
复制代码

npm token 需要自己去生成

image.png

这里不建议直接把 token 复制到控制台,在控制台输入的每条指令都会被记录下来,存在泄漏的风险;换一种方式,把 token 存在本地电脑的配置文件里,笔者用的是 item2,可以在用户目录下的 .zshrc 添加 token 配置

~/.zshrc
export NPM_TOKEN = npm_lzRjxxFht6LeFZQHrSJSGxxxxx // 底部新增一行
复制代码

添加完后执行使配置生效

source ~/.zshrc
复制代码

这时候可以在终端打印下添加的变量进行验证

image.png

最后在控制台执行

rush publish -p --include-all -n $NPM_TOKEN
复制代码

如果用的是 mac 自带的终端,则修改 .bash_profile 文件即可

发布结果

image.png

总结

借助 rush , 在 rush + pnpm + ts + menorepo 脚手架开发之环境篇一 遗留的问题都能够得到很好的解决,并且 rush的本领还远不止于此,推荐大家有时间的话都可以尝试用起来。

相关链接

js-cli 脚手架源码

分类:
前端
收藏成功!
已添加到「」, 点击更改