Turborepo 快速入门

Turborepo介绍

Turborepo是原webpack团队推出的一个为 JavaScript和TypeScript代码库优化的智能构建系统,Turborepo 使用缓存来增强本地设置并加快 CI 速度。Turborepo开箱即用,可以与 npmpnpmyarn等单版本工具一起使用。如果你觉得你的monorepo拖累了你,可能是时候使用Turborepo了。

monorepo又是什么呢?

Monorepo 是一种项目代码管理方式,指单个仓库中管理多个项目,有助于简化代码共享、版本控制、构建和部署等方面的复杂性,并提供更好的可重用性和协作性。Monorepo 提倡了开放、透明、共享的组织文化,这种方法已经被很多大型公司广泛使用,如 Google、Facebook 和 Microsoft 等。想要了解更多可以去此博客学习juejin.cn/post/721588...

Turborepo核心概念

通俗来说,是利用一种缓存的机制,和第一次构建相同的文件直接引用缓存,跳过构建,不同的文件再进行构建,从而大幅度减少了构建时间。提高了构建速度。

安装 Turborepo

废话不多说,我们自己开始操作。turborepo是要与npm,yarn,pnpm配合使用的。

全局安装turbo
js 复制代码
pnpm install turbo --global

npm和yarn都是可以的,我这里用的是pnmp。安装成功后,我们就可以使用turbo命令了。接下来我们可以新建新的项目来体验一下。

开始
js 复制代码
pnpm dlx create-turbo@ latest

创建turbo脚手架,运行效果如下:

第二问题 这是让你选择包管理工具,建议选pnpm,选完后,等待片刻即可。完成后你将得到一个这样的文件目录,接着来我们一一了解一下turborepo基本功能。

首先我们先来看turbo.json

json 复制代码
{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**"]
    },
    "lint": {
      "dependsOn": ["^lint"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

其中pineline中的buildlintdev,是不是像极来我们package.jsonscripts中我们经常定义的打包、格式化和开发脚本。其实它就是我们的打包、格式化和启动开发的脚本。这里的脚本是需要项目的根目录下运行turbo ${pipelineKey},例如:turbo build。当我们执行turbo build时,效果如下:

不难看出有5个包在执行这个build命令,从而我们可以看出turborepo做的事情就是控制多个包同时运行他们的自己的build命令。它是怎么做到的呢?回到我们的文件目录,找到上面那5个项目的其中一个的目录,我这里以/my-turborepo/apps/docs为例,目录结构如下:

其实就是next项目,nextreact的一个开发框架。文档链接:www.nextjs.cn/package.json中确实有build打包命令。从而知道了,当执行turbo build的时候,确实是会执行到这里的build命令。问题是turbo是怎么找到这里来的呢?是怎么知道我要构建的项目在这个目录下呢?我们回到根目录,找到一个pnpm-workspace.yaml文件,内容如下:

js 复制代码
packages:
  - "apps/*"
  - "packages/*"

大致的意思就是在这两个目录下的所有项目都会执行build命令,官方说法就是在这两个目录下建立工作区。所以,turbo是通过pnpm-workspace.yaml这个文件来去找到它要执行的项目,从而去同步控制他们打包。那问题来了,我要是只想运行单独运行一个项目呢?可能我们想到此目录下去执行相应的命令。同时,tutbo也提供了相关命令,如下:

js 复制代码
turbo dev --filter docs

就是在命令中添加一个 --filter 标志。到这里我们就大概明白turbo里面的大体的工作流程了,一些功能配置详情可以查阅官方文档:turbo.build/repo/docs

总结

可能我们有人会疑问turbo的使用场景是什么呢?其实turbo一般是用来我们内部组件库的搭建、一些大型项目的拆分等场景下使用。工作区的概念,让我们的项目构建更加的灵活,可维护性更好。

相关推荐
放下华子我只抽RuiKe59 小时前
React 从入门到生产(四):自定义 Hook
前端·javascript·人工智能·深度学习·react.js·自然语言处理·前端框架
码云之上13 小时前
万星入坞·其三:SDK 轻量组件如何优雅地"点亮"
性能优化·架构·前端框架
星栈19 小时前
Rust 全栈项目里,我写了一个不再重复造轮子的泛型表格组件
前端·前端框架·开源
Maimai1080819 小时前
React 多步骤表单工程化落地:从 Zod Schema、React Hook Form 到 Zustand 持久化
前端·javascript·react.js·前端框架·状态模式
Maimai1080819 小时前
React Query + Zustand 正确结合方式:不要把接口数据复制进 Store
前端·javascript·react.js·前端框架·web3·状态模式
Maimai1080820 小时前
Zustand 项目落地:从全局状态、Store 拆分到真实业务封装
前端·react.js·前端框架·状态模式
放下华子我只抽RuiKe520 小时前
React 从入门到生产(五):状态管理选型
前端·javascript·人工智能·深度学习·react.js·前端框架·ecmascript
右耳朵猫AI21 小时前
React技术周刊 2026年第16周
前端·react.js·前端框架
Maimai108081 天前
React如何用 @microsoft/fetch-event-source 落地 SSE:比原生 EventSource 更灵活的实时推送方案
前端·javascript·react.js·microsoft·前端框架·reactjs·webassembly
humcomm1 天前
元框架的工作原理详解
前端·前端框架