Turborepo简易教程

news2024/11/19 22:48:36

参考官网:https://turbo.build/repo/docs

开始

安装全新的项目

pnpm dlx create-turbo@latest

测试应用包含:

  • 两个可部署的应用
  • 三个共享库

image.png
运行:

pnpm install
pnpm dev

会启动两个应用web(http://localhost:3000/)、docs(http://localhost:3001/)。
image.png
image.png
可以看到,两个应用都依赖了packages下的ui组件。

安装到已有项目中

按官方的说法,Turborepo可以安装到所有类型的应用中,不仅仅是multirepo,还有singlerepo。

安装turbo

官方建议是同时安装到全局和应用中

# Global install
pnpm add turbo --global
# Install in repository
pnpm add turbo --save-dev
新增一个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
    }
  }
}

编辑.gitignore

+ .turbo

初始化仓库

下面以monorepo为例。
目录结构:
image.png

最低要求

包管理

官方推荐apps目录下存放应用,packages目录下存放公共库或者工具类。

packages:
  - "apps/*"
  - "packages/*"

monorepo用pnpm比较好,所以只贴了pnpm的例子,如果要看yarn的,可以看Structuring a repository | Turborepo
使用此配置,apps或packages目录中包含package.json的每个目录都将被视为一个包。

Turborepo不支持嵌套,例如apps/或者packages/
如果一定要嵌套,可以配置为packages/和packages/group/,然后不要创建packages/group/package.json文件

根目录package.json

示例:

{
  "private": true,
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev",
    "lint": "turbo run lint"
  },
  "devDependencies": {
    "turbo": "latest"
  },
  "packageManager": "pnpm@9.0.0"
}

packageManager不可少,否则报错。

根目录turbo.json

turbo.json用于配置turbo的行为。

lockfile

例如pnpm-lock.yaml,这是复用缓存的关键。

依赖管理

依赖分为外部依赖和内部依赖。

{
  "dependencies": {
    "next": "latest", // External dependency
    "@repo/ui": "workspace:*" // Internal dependency
  }
}

创建一个内部包示例

在packages中新建math目录,作为公共仓库。
image.png
创建package.json

{
  "name": "@repo/math",
  "type": "module",
  "scripts": {
    "dev": "tsc --watch",
    "build": "tsc"
  },
  "exports": {
    "./add": {
      "types": "./src/add.ts",
      "default": "./dist/add.js",
    },
    "./subtract": {
      "types": "./src/subtract.ts",
      "default": "./dist/subtract.js",
    },
  },
  "devDependencies": {
    "@repo/typescript-config": "workspace:*",
    "typescript": "latest"
  }
}

exports: 为包定义多个入口点,以便可以在其他包中使用。import { add } from '@repo/math'
Turborepo会将@repo/math识别为@repo/typescript-config的依赖项,用于对任务进行排序。
添加tsconfig.json,使用extends关键字继承公共配置:

{
  "extends": "@repo/typescript-config/base.json",
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

在src中编写源码:
./packages/math/src/add.ts

export const add = (a: number, b: number) => a + b;

./packages/math/src/subtract.ts

export const subtract = (a: number, b: number) => a - b;

最后在应用中使用该库:
apps/web/package.json

"dependencies": {
+ "@repo/math": "workspace:*",
  "next": "latest",
  "react": "latest",
  "react-dom": "latest"
},

apps/web/src/app/page.tsx

import { add } from '@repo/math/add';

function Page() {
  return <div>{add(1, 2)}</div>;
}

export default Page;

turbo.json中添加编译缓存"dist/**",这样以后编译时就可以跳过math的编译:

{
"tasks": {
  "build": {
    "dependsOn": ["^build"],
    "outputs": [".next/**", "!.next/cache/**", "dist/**"]
  },
}

任务配置

定义tasks

tasks中每个key都是一个会被turbo run执行的任务。Turborepo会在每个package.json中查找同名脚本来执行。
例如一个最基础的task,不包含dependencies和outputs:

{
  "tasks": {
    "build": {} // Incorrect!
  }
}

使用该配置,turbo将不会使用缓存,导致每次构建时间都很长。

指定tasks顺序

dependsOn用于指定在另一个任务开始运行之前必须完成的任务。
假如你需要在应用编译前先执行公共仓库的构建,可以这样配置:

{
  "tasks": {
    "build": {
      "dependsOn": ["^build"] 
    }
  }
}

依赖^的任务

^告诉Turbo从依赖树的最底层开始构建。
假如你的应用依赖了一个仓库ui且这个ui有一个build脚本,那么这个build脚本会先执行。一旦这个uibuild任务执行完毕,应用的build就会立即执行。

依赖同一个package中的任务

假如在当前应用中,你想在执行test前先执行build任务,test需要定义dependsOnbuild。(没有^!)

{
  "tasks": {
    "test": {
      "dependsOn": ["build"] 
    }
  }
}

依赖特定包中的任务

有时你可能需要依赖特定包中的任务。
例如在所有lint任务执行前先执行util库中的build任务:

{
  "tasks": {
    "lint": {
      "dependsOn": ["utils#build"] 
    }
  }
}

还可以更具体地说明相关任务,将其限制为某个包:

{
  "tasks": {
    "web#lint": {
      "dependsOn": ["utils#build"] 
    }
  }
}

使用此配置,web包中的lint任务只能在utils包中的构建任务完成后运行。

无依赖

在这种情况下,可以省略dependsOn键或提供一个空数组。

{
  "tasks": {
    "spell-check": {
      "dependsOn": [] 
    }
  }
}

定义outputs

outputs告诉Turborepo在任务成功完成后应该缓存的文件和目录。如果不配,就不会使用缓存。

{
  "tasks": {
    "build": {
      "outputs": ["dist/**"] 
    }
  }
}

定义inputs

inputs用于指定要包含在任务哈希中以进行缓存的文件。默认情况下,Turborepo将包含Git跟踪的包中的所有文件。但是,您可以使用inputs键来更具体地确定哪些文件包含在散列中。
例如,在Markdown文件中查找拼写错误的任务可以这样定义:

{
  "tasks": {
    "spell-check": {
      "inputs": ["**/*.md", "**/*.mdx"] 
    }
  }
}

这样的话只有md文件的变更才会让turbo不使用缓存。

高级用例

有副作用的任务

有些任务无论如何都应该运行,比如在缓存构建之后运行部署脚本。可以使用"cache": false:

{
  "tasks": {
    "deploy": {
      "dependsOn": ["^build"],
      "cache": false
    },
    "build": {
      "outputs": ["dist/**"]
    }
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1896273.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

springboot智慧家政系统-计算机毕业设计源码96192

目 录 摘要 1 绪论 1.1 选题背景与意义 1.2开发现状 1.3论文结构与章节安排 2 智慧家政系统系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 操作可行性分析 2.2 功能需求分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用例分析 …

MMSC物料库位扩充

MMSC物料库位扩充 输入事务码MMSC&#xff1a; 回车后添加新的库位即可&#xff1a; 代码实现&#xff0c;使用BDC *&------------------------------------------------* *&BDC的定义 *&------------------------------------------------* DATA gt_bdcdata T…

意图数据集HWU、Banking预处理

当谈到意图数据集时&#xff0c;HWU、Banking和Clinc是三个常见的数据集。以下是关于这三个数据集的介绍&#xff1a; 目录 一、数据集介绍 HWU数据集 Banking数据集 Clinc数据集 二、数据集预处理 数据处理 数据存储 数据类别分析 句子长度统计 一、数据集介绍 HW…

C++20中的三向比较运算符(three-way comparison operator)

在C20中&#xff0c;引入了一个新的特性&#xff0c;即"三向比较运算符(three-way comparison operator)"&#xff0c;由于其外观&#xff0c;也被称为"宇宙飞船运算符(spaceship operator)"&#xff0c;其符号为<>。目的是简化比较对象的过程。这个…

JavaScript中闭包的理解

闭包&#xff08;Closure&#xff09;概念&#xff1a;一个函数对周围状态的引用捆绑在一起&#xff0c;内层函数中访问到其外层函数的作用域。简单来说;闭包内层函数引用外层函数的变量&#xff0c;如下图&#xff1a; 外层在使用一个函数包裹住闭包是对变量的保护&#xff0c…

用递归解决冒泡排序问题

冒泡排序是种很简单的排序方式. 如果用循环方式, 通常就是两层循环. 由于两层循环都是与元素个数 N 线性相关, 所以可以简单估算出它的时间复杂度是 O(N2), 通常而言, 这是较糟糕的复杂度. 当然, 这也几乎是所有简单方式的宿命, 想简单就别想效率高! 前面篇章说到递归也是一种循…

【LabView学习篇 - 1】:初始LabView

文章目录 初始LabView前面板和程序框图前面板&#xff08;Front Panel&#xff09;程序框图&#xff08;Block Diagram&#xff09;交互和工作流程 练手小案例&#xff1a;LabView中实现加法操作 初始LabView LabVIEW&#xff08;Laboratory Virtual Instrument Engineering W…

学习笔记——动态路由——OSPF(基础配置)

九、OSPF基础配置 1、OSPF基础配置 <Huawei>sys [Huawei]sys AR1 [AR1]un in en //取消配置回馈信息 [AR1]int g0/0/0 [AR1-GigabitEthernet0/0/0]ip add 10.1.12.1 24 //给ar1路由接口0配置IP地址 # 配置OSPF [AR1-GigabitEthernet0/0/0]ospf 1 router…

Java中的日期时间类详解(Date、DateFormat、Calendar)

1. Date类 1.1 概述 java.util.Date类表示特定的瞬间&#xff0c;精确到毫秒。Date类的构造函数可以把毫秒值转成日期对象。 继续查阅Date类的描述&#xff0c;发现Date拥有多个构造函数&#xff0c;只是部分已经过时&#xff0c;我们重点看以下两个构造函数 1.2 Date类构造…

三界-欢迎来到Web3D+GIS学习天地!

三界-欢迎来到Web3DGIS学习天地&#xff01; 地址&#xff1a;threelab.cn ** 坚持封装自己的引擎已经有三年了&#xff0c;每天都是加班熬夜开发功能&#xff0c;做东西。 虽然这段时间内&#xff0c;我一直在业余时间坚持开发&#xff0c;但实际投入的开发时间并不长&#…

iOS 练习项目 Landmarks (五):UISwitch 切换展示数据

iOS 练习项目 Landmarks &#xff08;五&#xff09;&#xff1a;UISwitch 切换展示数据 iOS 练习项目 Landmarks &#xff08;五&#xff09;&#xff1a;UISwitch 切换展示数据引入 Lookin优化项目结构纯代码方式重写主界面设置详情页的返回按钮的文本Switch切换TableView展示…

通江银耳销售管理系统-计算机毕业设计源码15998

摘要 随着人们健康意识的增强&#xff0c;银耳这种传统的中药食材备受关注。而通江银耳是四川省通江县特产&#xff0c;中国国家地理标志产品。四川省通江县是银耳的发源地&#xff0c;中国银耳之乡&#xff0c;通江银耳因主产于此而得名&#xff0c;以其独到的质厚、肉嫩、易炖…

【linux高级IO(一)】理解五种IO模型

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Linux从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学更多操作系统知识   &#x1f51d;&#x1f51d; Linux高级IO 1. 前言2. 重谈对…

Chrome插件分享-Stylus

简介 Stylus 是一个调整网页外观的用户样式管理器。它可以让您轻松为许多热门网站安装主题和皮肤。 这是 chrome 应用商店对Stylus插件的介绍&#xff0c;通俗一点讲&#xff0c;就是可以根据不同网站来定制网页的主题和皮肤&#xff0c;甚至可以去广告。 还有一个重点是&#…

高薪程序员必修课-java中 类加载器以及JVM类加载机制

前言 在Java中&#xff0c;类加载器&#xff08;ClassLoader&#xff09;是Java虚拟机&#xff08;JVM&#xff09;的一个重要组成部分&#xff0c;负责将.class文件加载到内存中并生成对应的Class对象。类加载器的主要任务是动态加载Java类&#xff0c;即在程序运行时根据需要…

刚办理的手机号被停用,你可能遇到这些问题了!

很多朋友都会遇到手机号被停用的情况&#xff0c;那么你知道你的手机号为什么会被停用吗&#xff1f;接下来&#xff0c;关于手机号被停用的问题&#xff0c;跟着小编一块来了解一下吧。 ​停机的两种形态&#xff1a; 1、第一个是局方停机&#xff0c;即语音、短信和流量都不…

Amazon SageMaker 机器学习之旅的助推器

一、前言 在当今的数字化时代&#xff0c;人工智能和机器学习已经成为推动社会进步的重要引擎。亚马逊云科技在 2023 re:Invent 全球大会上&#xff0c;宣布推出五项 Amazon SageMaker 新功能&#xff1a; Amazon SageMaker HyperPod 通过为大规模分布式训练提供专用的基础架构…

香橙派AIpro开发板评测:部署yolov5模型实现图像和视频中物体的识别

OrangePi AIpro 作为业界首款基于昇腾深度研发的AI开发板&#xff0c;自发布以来就引起了我的极大关注。其配备的8/20TOPS澎湃算力&#xff0c;堪称目前开发板市场中的顶尖性能&#xff0c;实在令人垂涎三尺。如此强大的板子&#xff0c;当然要亲自体验一番。今天非常荣幸地拿到…

Kubernetes基于helm安装 harbor

Kubernetes基于helm安装 harbor 之前harbor的安装都是借助docker完成一键安装部署&#xff0c;安装完成之后harbor组件均运行到一台机器上面&#xff0c;本文实践harbor在k8s环境中的部署。 准备工作 根据harbor官方要求&#xff1a; Kubernetes cluster 1.20Helm v3.2.0 …