Turborepo简易教程

参考官网: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/**"]
    }
  }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

程序员,去哪个城市工作更幸福?

深漂、沪漂、京漂、杭漂……又是一年毕业季&#xff0c;作为CS专业or新手程序员会选择什么城市工作呢&#xff1f;希望这篇文章给各位一些参考。 根据拉勾招聘大数据研究院的数据显示&#xff0c;超六成程序员集中在一线城市&#xff0c;其中北京19%&#xff0c;深圳16%&#x…

【遇坑笔记】Node.js 开发环境与配置 Visual Studio Code

【遇坑笔记】Node.js 开发环境与配置 Visual Studio Code 前言node.js开发环境配置解决pnpm 不是内部或外部命令的问题&#xff08;pnpm安装教程&#xff09;解决 pnpm : 无法加载文件 C:\Program Files\nodejs\pnpm.ps1&#xff0c;因为在此系统上禁止运行脚本。 vscode 插件开…

汇川H5U小型PLC不用写程序测试EC总线电机

目录 新建工程添加EtherCAT组态添加运动控制轴仿真测试 新建工程 新建一个H5U工程&#xff0c;不使用临时工程 系列选择H5U即可 添加EtherCAT组态 这里在EC总线中添加了一个汇川660的伺服 驱动参数使用默认 添加运动控制轴 新建一个轴Axis_0 将新建的轴和EC组态的660驱动…

中国1km高分辨率高质量逐年近地表CO数据集(2013-2022年)

该数据为中国高分辨率高质量逐年CO数据集&#xff0c;该数据集主要的空间范围覆盖整个中国&#xff0c;其中内容包括中国1km高分辨率高质量逐年CO数据集(2013-2022年)。时间分辨率为年&#xff0c;单位为mg/m3&#xff0c;数据以(.nc/.tif)格式进行存储。

解决 npm intasll 安装报错 Error: EPERM: operation not permitted

Node.js安装及环境配置完成之后 npm install express -g 安装全局的模块报错提示没有权限operation not permitted mkdir 错误编号4048&#xff1a; 其原因是当前用户操作该目录权限不足&#xff0c;当以管理员身份运行cmd&#xff0c;再执行npm install express -g 是不会报权…

使用 AlphaZero 和 Tabu 搜索查找越来越大的极值图

使用 AlphaZero 和 Tabu 搜索查找越来越大的极值图 AlphaZero 方法最佳研究&#xff08;第1部分&#xff09; 文章目录 一、说明二、引言三、预备知识四、方法4.1 AlphaZero4.2 禁忌搜索 五、实验与结果六、讨论七、附录A 一个例子B 问题背景 一、说明 人工智能的树和图的检索问…

Solution

(解决方案)可行性研究报告暨设计方案-zengwenfeng.doc 基本上都要300-500多页&#xff0c;大型【纯软件】&#xff0c;县级0-200万&#xff0c;市级项目500-1500万不等&#xff0c;省部级1000-10000万不等都有。本例为过往已完成项目案例目录结构。搞方案都要准备1-3个月呢。所…

Windows搭建本地对象存储服务MinIO并且使用springboot整合

开发文档&#xff1a; MinIO Windows中文文档 MinIO Object Storage for Windows &#xff08;英文文档&#xff09; 1、准备工作 准备一个空的文件夹&#xff0c;用来存放minio相关的内容&#xff1b; 这里是在D盘创建一个minio的文件夹&#xff1b; 后续所有跟MinIO相关…

探寻操作系统文件名字符限制的规则和历史

引言 从最早的电脑系统到现代的操作系统&#xff0c;文件命名的规则一直在不断发展&#xff0c;这些规则体现了不同操作系统设计哲学的差异。作为开发者&#xff0c;了解这些差异和背后的历史渊源非常有价值&#xff0c;本文将详细探讨Windows、macOS和Linux三大主流操作系统在…

【网络安全】第7讲 计算机病毒概述(笔记)

一、计算机病毒的简介 1、名称的由来 由生物医学上的 “病毒” 一词借用而来。 &#xff08;1&#xff09;与生物医学上“病毒”的异同 同&#xff1a;都具有传染性、流行性、针对性等。异&#xff1a;不是天生的&#xff0c;而是人为编制的具有特殊功能的程序。 2、病毒的起…

(附源码)springboot高校全流程考勤系统-计算机毕设 27637

Springboot高校全流程考勤系统 摘 要 本文针对高校考勤等问题&#xff0c;对其进行研究分析&#xff0c;然后开发设计出高校全流程考勤系统以解决问题。高校全流程考勤系统系统主要功能模块包括&#xff1a;考勤签到、课程信息、考勤情况、申请记录列表等&#xff0c;系统功能设…

python运维开发 业务服务监控详解

业务监控是运维体系中最重要的环节&#xff0c;是保证业务服务质量的关键手段&#xff0c;python在监控方面提供了大量的第三方工具&#xff0c;可以帮助我们快速、有效的开发企业级服务监控平台 一、文件内容差异对比方法 difflib作为python的标准库模块&#xff0c;无需安装…

等保测评需要什么SSL证书

在进行信息安全等级保护&#xff08;简称“等保”&#xff09;测评时&#xff0c;选择合适的HTTPS证书对于确保网站的安全性和合规性至关重要。以下是在等保测评中选择HTTPS证书时应考虑的因素&#xff1a; 国产证书&#xff1a; 等保测评倾向于使用国产品牌的SSL证书&#x…

Linux系统编程——线程基本概念

目录 一&#xff0c;关于多线程 二&#xff0c;重新理解进程 三&#xff0c;线程VS进程 四&#xff0c;线程周边概念 4.1 线程的数据共享 4.2 线程的优点 4.3 线程的缺点 4.4 线程异常 4.5 线程用途 五&#xff0c;一些问题解答 如何理解将资源分配给各个线程&…

Java面试八股之MySQL的pconenct和connect有什么区别

MySQL的pconenct和connect有什么区别 在PHP中&#xff0c;mysql_pconnect() 和 mysql_connect() 是用来建立与MySQL数据库服务器连接的两个函数&#xff0c;它们的主要区别在于连接的持久性。 mysql_connect(): 这个函数每次调用都会尝试创建一个新的数据库连接。 当PHP脚本…

气象观测站:观测和记录各种气象要素

在广袤无垠的蓝天下&#xff0c;气象观测站如同一个个静默的守护者&#xff0c;默默记录着风云变幻&#xff0c;守护着大地的安宁。 一、气象观测站&#xff1a;守护天空的“千里眼” 气象观测站&#xff0c;顾名思义&#xff0c;就是专门用于观测和记录各种气象要素的站点。它…

峰与谷00

题目链接 峰与谷 题目描述 注意点 nums.length < 10000 解答思路 首先想到的是将数组中的元素都存到优先队列中&#xff0c;然后取一半的元素插入到数组奇数位置&#xff0c;再将剩下一半的元素插入到数组偶数位置即可&#xff0c;但是时间上并不理想参照题解可以从局部…

全国现状建筑数据,选中范围即可查询下载,富含建筑物位置、层数、建筑物功能、名称地址等信息!

今天分享的是一个绘制范围即可下载范围内的建筑数据下载工具&#xff0c;内含高质量建筑数据数据源&#xff0c;助力场地建设规模一目了然。 数据可视化&#xff1a; 建筑物位置、层数、建筑轮廓地图可见&#xff0c;辅助分析。 数据字段&#xff1a; 建筑高度、层数、基地面…

《C++20设计模式》享元模式

文章目录 一、前言二、享元模式1、UML类图2、实现 一、前言 《C20设计模式》书中对于享元模式个人感觉不是太清晰&#xff0c;就跟逗小孩玩似的。 享元模式模式是干什么的&#xff1f; 答 &#xff1a;牺牲性能&#xff0c;换取内存空间的技术。 相关代码可以在这里&#xf…

vs2019 无法打开项目文件

vs2019 无法打开项目文件&#xff0c;无法找到 .NET SDK。请检查确保已安装此项且 global.json 中指定的版本(如有)与所安装的版本相匹配 原因&#xff1a;缺少组件 解决方案&#xff1a;选择需要的组件进行安装完成