Turborepo开车上路

想要飞翔的猪
2,645 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

Turborepo is a high-performance build system for JavaScript and TypeScript codebases.(Turborepo是为JS和TS代码库而生的高性能构建系统)

是在monorepo模式中非常推荐的构建工具

1. 为什么选他（官网首页翻译机）

  1. Incremental builds，(增量构建)
  2. Content-aware hashing,(内容hash)
  3. Remote Caching，(远程缓存)
  4. Parallel execution，（并行执行）
  5. Zero runtime overhead（0运行时开销）牛逼！
  6. Pruned subsets（真子集,通过生成您的monorepo子集，只生成构建特定目标所需的内容，从而加速PaaS部署。)
  7. Task pipelines,(任务管道)

2. 开始使用

其实怎么使用，官网说的挺详细了，英语一般，配合翻译工具，有点耐心，其实也很容易上手，就怕有些小伙伴，直接看到英文就放弃了......

放弃了也不要紧，来看本篇文章吧~

2.1 新的monorepo使用

npx create-turbo@latest 直接用该命令行创建一个新的项目。可以去这里看看他的几个项目模板

2.2 在已有的monorepo项目中接入Turborepo

Turborepo接入设计采取的是逐渐适配。他作用在Yarn v1,npm,pnpm的workplaces。

  1. 安装turo yarn add turbo -DW 或npm install turbo -D 或 pnpm add turbo -DW

  2. 创建一个turbo.json文件

{
  "$schema": "https://turborepo.org/schema.json", // 默认配置
  "baseBranch": "origin/main" // 基础分支，如果基础分支不是origin/master 需指明
}
  1. 创建任务管道 玩过gulp的小伙伴，应该对这个东西不陌生。

在Turborepo中，创建的任务管道，其实就是命令。例如管道配置如下：

{
  "$schema": "https://turborepo.org/schema.json",
  "baseBranch": "origin/main",
   "pipeline": {
    "build": {
      "dependsOn": [
        "^build"
      ],
      "outputs": ["dist/**"]
    },
    "dev": {
      "cache": false
    },
    "format": {
      "cache": false
    },
    "release": {
      "dependsOn": [
        "test"
      ],
      "outputs": []
    },
    "test": {
      "dependsOn": [
        "lint"
      ]
    }
  }
}

在这个管道任务配置中，以build列举，build任务都是依赖于他们的dependencies和首先被构建的devDependencise里面的包，这是用^前缀表示的。

因此对于该项目其下的出处workspaces项目或者是包。当运行turbo run build命令时就会依次执行他们package.json里面的build命令，同时如果没有配置覆盖，Turborepo 将会缓存文件输出到dist/**和build/**,使用outputs就能指定输出文件，Turborepo会自动记录和缓存日志到.turbo/turbo-<script>.log，所以你不需要在输出数组中指定。

配置中的dev的cache为false，意思就是禁用dev任务的缓存

  1. 配置.gitignore
# turbo
.turbo

# build
build
dist

# dependencies
node_modules

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.loc
  1. 确保根项目的package.json已配置workspaces
"workspaces": [
    "apps",
    "packages/*"
],

官方文档建议，应用程序放apps里面，apps依赖包放packages里面。其实按这种设计，就能将项目很好按pnp模式进行扩展。应用程序依赖都各种包，方便各种功能升级，也能作为quick start模板项目，这样扩展项目模板只用去扩展包，而不是直接在模板项目中写迭代逻辑（直接模板项目写迭代逻辑，会导致用该模板创建的旧项目升级变的很困难），而是扩展他的包，或者升级他的包逻辑，这样旧项目升级只需要更新包或者安装新包就能完成更新。

  1. 在项目根package.json简化turbo命令
"scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev --parallel",
}

95%的项目完成上面6个步骤即可，更多的就参考官网吧！

【扩展】和多包管理工具一起工作

我这里推荐使用changeset

关于这个下篇文章~

avatar
文章
阅读
粉丝