使用 pnpm、turborepo 构建 monorepo 项目，changesets 管理日志和版本详解，从零至 github actions（CI）云端缓存 发布 npm 流程
环境与版本
platform=>mac osnode=>v22.2.0npm=>10.8.0pnpm=>9.1.3yarn=>1.22.22turbo=>1.13.3changesets=>2.27.5
前置准备
快速开始
命令初始化
pnpm dlx create-turbo@latest
使用模版
本文使用的模版：monorepo with changesets
pnpm dlx create-turbo -e with-changesets目录结构
demo-turoborepo
├── apps
│ ├── docs
│ └── web
├── packages
│ ├── ui
│ ├── eslint-config
│ └── typescript-config
├── package.json
├── turbo.json
└── pnpm-workspace.yamlTurborepo
Turborepo 介绍
Turborepo 是专为 JavaScript 和 Typescript 的 monorepo 项目设计的高性能构建系统。可以高效管理和构建项目中多个 packages，通过缓存构建和测试结果，来提升开发和持续集成的效率。Turborepo 旨在提高大型 monorepo 项目的构建效率，在复杂的项目中，可以更好的处理任务之间的依赖关系，并保证构建的正确性和效率。
优势
- 多任务并行处理
- 增量构建
- 云缓存
Pipeline - 管道
Turborepo 为开发人员提供了一种以常规方式显示指定任务关系的方法。 在 Turborepo 中可以在项目根目录中定义 turbo.json 来配置输出、缓存依赖、打包等功能。
在 pipeline 中的每一个 key 都指向我们在 package.json 中定义的 script 脚本执行命令，并且在 pipeline 中的每一个 key 都可以被 turbo run 执行。
在执行 turbo run 命令时，turbo 会根据 pipeline 中的配置，对每个 package.json 中的 script 执行脚本进行有序的执行和 缓存输出的文件和日志
turbo.json{ "$schema": "https://turbo.build/schema.json", "globalDependencies": ["**/.env.*local"], "pipeline": { "build": { // `build` tasks being completed first // (the `^` symbol signifies `upstream`). "dependsOn": ["^build"], // note: output globs are relative to each package's `package.json` // (and not the monorepo root) "outputs": [".next/**", "!.next/cache/**"] }, "test": { // A package's `test` script depends on that package's // own `build` script being completed first. "dependsOn": ["build"], "outputs": [], // A package's `test` script should only be rerun when // either a `.tsx` or `.ts` file has changed in `src` or `test` folders. "inputs": ["src/**/*.tsx", "src/**/*.ts", "test/**/*.ts", "test/**/*.tsx"] }, "lint": { "dependsOn": ["^lint"] }, "dev": { // Setting cache to false is useful for daemon or long-running "watch" // or development mode tasks you don't want to cache. "cache": false, // Label a task as persistent if it is a long-running process // such as a dev server or --watch mode. "persistent": true } } }
dependsOn
常规依赖
如果任务需要依赖其他任务，则可以放入 dependsOn 内。例如执行 deploy 任务时需要 build、test、lint 任务先完成
当然，在这里你只需要执行 turbo run deploy 即可，turbo 会按 dependsOn 中定义脚本执行
demo-turoborepo/turobo.json{ "turbo": { "pipeline": { "deploy": { "dependsOn": ["build", "test", "lint"] } } } }
依赖工作空间中的包 - From dependent workspaces
目录结构
例如当 docs build 时，需要 ui 和 hooks build 完成之后，此时需在 dependsOn 中配置 ^ 符号来明确依赖关系。
apps/
docs/package.json # 依赖 ui 和 hooks
packages/
ui/package.json
hooks/package.json
turbo.json
package.json{
"$schema": "https://turbo.build/schema.json",
"pipeline": {
"build": {
// A workspace's `build` command depends on its dependencies'
// and devDependencies' `build` commands being completed first
"dependsOn": ["^build"]
}
}
}拓扑依赖 - Dependencies outside of a task
目录结构
apps/
docs/package.json # 依赖 ui
web/package.json # 依赖 ui
packages/
ui/package.json # 无依赖
turbo.json
package.jsonturbo.json{ "pipeline": { // fake task "topo": { "dependsOn": ["^topo"] }, "typeCheck": { "dependsOn": ["topo"] } } }
demo-turborepo/test-topo/docs/package.json{ "name": "docs", "script": { "typeCheck": "tsc --checkJs --noEmit" } }
应用场景
先了解业务场景，再尝试理解这段逻辑。
turbo.json{ "pipeline": { "topo": { "dependsOn": ["^topo"] }, "typeCheck": { "dependsOn": ["topo"] } } }
[{"url":"https://image.baidu.com/search/down?url=https://gzw.sinaimg.cn/mw690/0085UwQ9gy1hq8p6wz6p2j30kg0jen88.jpg","alt":""},{"url":"https://image.baidu.com/search/down?url=https://gzw.sinaimg.cn/mw690/0085UwQ9gy1hq8p6xmbsqj30vi0jaapc.jpg","alt":""}]
本地远程缓存
登录 Vercel
执行命令后，你将跳转至 Vercel 的授权页面
turbo login
# or
pnpm dlx turbo login
开启缓存
turbo link
# or
pnpm dlx turbo link测试远程缓存
rm -rf ./node_modules/.cache/turbo
关闭缓存
turbo unlink
# or
pnpm dlx turbo unlink在 CI 中使用远程缓存 - Using Turborepo with GitHub Actions
设置环境变量
.github/workflows/[release].ymlname: Release on: push: branches: - "main" jobs: release: name: Release runs-on: ubuntu-latest # To use Turborepo Remote Caching, set the following environment variables for the job. env: TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }} TURBO_TEAM: ${{ vars.TURBO_TEAM }} steps: - name: Install Dependencies run: pnpm i - name: Build run: pnpm build
生成 secrets TURBO_TOKEN
生成 variables TURBO_TEAM
缓存效果
[{"url":"https://image.baidu.com/search/down?url=https://gzw.sinaimg.cn/mw2000/0085UwQ9gy1hq930gazh1j31kw0mktjl.jpg","alt":""},{"url":"https://image.baidu.com/search/down?url=https://gzw.sinaimg.cn/mw2000/0085UwQ9gy1hq91fmtd9jj31ly0coh39.jpg","alt":""}]
changesets
安装 changeset
pnpm add -Dw @changesets/cli
# or
pnpm add -Dw @changesets/cli @changesets/changelog-github
# or
pnpm add -Dw @changesets/cli @changesets/changelog-git初始化
pnpm changeset init .changeset/config.json{ "$schema": "https://unpkg.com/@changesets/config@3.0.1/schema.json", "changelog": [ "@changesets/changelog-github", { "repo": "tardis-ksh/demo-turborepo" } ], "commit": false, "fixed": [], "linked": [], "access": "public", "updateInternalDependencies": "patch", "ignore": ["@tardis-ksh/docs", "@test/**"], "baseBranch": "main" }
配置说明
* baseBranch（git branch name）
access (restricted | public)
commit (boolean, or module path as a string, or a tuple like [modulePath: string, options: any])
updateInternalDependencies（patch | minor | major）
ignore (array of packages)
{
"ignore": ["@tardis-ksh/docs", "@test/**"]
}* changelog
@changesets/changelog-github
{
"changelog": [
"@changesets/changelog-github",
{ "repo": "tardis-ksh/demo-turborepo" }
]
}@changesets/changelog-git
{
"changelog": "@changesets/changelog-git"
}custom
{
"changelog": "./getChangelogEntry",
}命令
changeset add 添加变更
pnpm changeset add
# or
pnpm changeset
变更文件
changeset version 生成 版本变更 和 changelog
pnpm changeset versionproblem with @changesets/changelog-github
add `GITHUB_TOKEN
$ vim ~/.zshrc
# add in your file
# export GITHUB_TOKEN = "some string"
$ source ~/.zshrc
$ echo $GITHUB_TOKEN或者临时使用
GITHUB_TOKEN=your_token pnpm changeset versionCannot read properties of null (reading ‘author’)
publish
pnpm changeset publish在 CI（actions）中使用
name: Release
on:
push:
branches:
- "main"
jobs:
release:
name: Release
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@v4
with:
# This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
fetch-depth: 0
- name: Setup pnpm
run: corepack enable
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 20.x
- name: Install Dependencies
run: pnpm i
- name: Create Release Pull Request or Publish to npm
id: changesets
uses: changesets/action@v1
with:
# This expects you to have a script called release which does a build for your packages and calls changeset publish
publish: pnpm release
commit: 'chore: release packages'
title: 'chore: release packages'
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: if a publish happens
if: steps.changesets.outputs.published == 'true'
# You can do something when a publish happens.
run: |
echo "down"处理 Pull requests - changeset-bot
结尾
Turborepo
changesets
changesets/action
https://juejin.cn/post/7129267782515949575
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 kshao-blog-前端知识记录！
微信- 支付宝
相关推荐
2024-05-27
npm、yarn、pnpm 设置最新国内镜像源（附官方镜像源和最新阿里源），以及 nrm 的使用教程
阿里最近（指的是 2022 年~~ 哈哈）更换了淘宝镜像的域名，原域名的 SSL 证书已经过期了（2024/01/22），最近使用旧 淘宝镜像 的应该都遇到 Error: certificate has expired 了吧，遇到了可以看下这个解决方案~ npm查询源npm get registry 设置源# 国内 淘宝 镜像源 npm config set registry https://registry.npmmirror.com/ # 官方镜像源 npm config set registry https://registry.npmjs.org/ pnpm pnpm 的镜像源默认 查询源pnpm get registry 设置源# 国内 淘宝 镜像源 pnpm config set registry https://registry.npmmirror.com/ # 官方镜像源 pnpm config set registry https://registry.npmjs.org/ yarn查询源yarn config get...
2024-09-11
pnpm monorepo 中管理依赖的最佳实践，与 Catalogs（目录）协议的使用（monorepo 中统一版本管理）
monorepo 中如何管理依赖？monorepo 的优势在 repo 之间的共享复用、规范统一管理等方面，而随着项目的规模增长，repo 的依赖处理逻辑也会随着迭代而复杂。 那 monorepo 中如何管理依赖呢？是将 repo 中的共同依赖安装至根目录的 package.json 中？还是将依赖安装至各 repo 的 package.json 中？ 在需要的 repo 中安装依赖对于大部分 monorepo 项目来说，直接在需要依赖项的 repo 中的 package.json 显示声明，无论是外部依赖还是内部的 repo 之间的依赖，即便 repo 之间的依赖是相同的。 在多个 repo 中安装相同依赖，可以使用以下命令： npmyarnpnpmnpm install jest --workspace=web --workspace=mobile --save-devyarn@v1: yarn workspace web add jest --dev yarn workspace mobile add jest...
2024-05-29
一文吃透 pnpm 如何使用 workspace 构建 monorepo，与 npm、yarn 的用法对比（pnpm 9.x 内部安装依赖问题 link-workspace-packages）
环境与版本 platform => mac os node => v22.2.0 npm => 10.8.0 pnpm => 9.1.3 yarn => 1.22.22 名词解释monorepo利用单一仓库来管理多个 packages 的一种策略，如早期的 lerna workspace由上述单仓多包催生的管理方式，workspace（工作空间） 是 npm、yarn、pnpm 等包管理工具提供的一种特性，用于管理多个包的依赖关系。合理配置 workspace 后，包之间互相依赖不需要使用 npm link，将在 install 时中处理 在 pnpm 中使用 workspaceA workspace must have a pnpm-workspace.yaml file in its root. A workspace also may have an .npmrc in its root.如文档描述，启用 pnpm 的 workspace 需要在项目根目录创建...
2024-05-27
解决 npm、cnpm 或 pnpm install 遇到 certificate has expired （证书已过期）
书接上回~ 前言由于种种原因，大家在使用 npm 或其他包管理工具时，都会更换其默认镜像源，例如：taobao 来提高效率。虽然早在 2022年 时淘宝发布了更换镜像地址的公告，直至 2024/01/22 SSL 证书过期前服务都是可用的。 由于 npm 默认开启了 ssl 验证，你可以选择关闭该项服务（不推荐，仅建议使用内部源时）或者更换正确的镜像源。 方案更换镜像源（推荐） 更多方法点击链接查看 > > > npm查询源npm get registry 设置源# 国内 淘宝 镜像源 npm config set registry https://registry.npmmirror.com/ # 官方镜像源 npm config set registry https://registry.npmjs.org/ 关闭 SSL 验证（不推荐）理论设置 npm 的即可，pnpm 同理 # 关闭 npm config set strict-ssl false # 恢复 npm config set...
评论
最新文章
