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/**"]}}
}

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

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

相关文章

什么开放式耳机好用?五大王牌开放式耳机种草!

随着科技的持续进步&#xff0c;开放式蓝牙耳机悄然兴起&#xff0c;逐步取代了经典的入耳式耳机。入耳式耳机以其卓越的隔音性能著称&#xff0c;然而&#xff0c;长时间的使用却容易引发耳道受压&#xff0c;伴随而来的不仅是疼痛与不适&#xff0c;更潜藏着耳膜受损的风险。…

JavaScript(5)——数据类型和类型检测

字符串类型String 通过单引号&#xff08; &#xff09;、双引号(" "&#xff09;或反引号&#xff08; &#xff09;都叫字符串&#xff0c;单引号和双引号本质上没有区别&#xff0c;一般使用单引号。 注意&#xff1a; 无论单引号或是双引号必须成对使用单引号和…

深入解读:如何解决微调扩散模型时微调数据集和训练数据集之间的差距过大问题?

Diffusion Models专栏文章汇总&#xff1a;入门与实战 前言&#xff1a;在微调扩散模型的时候经常会遇到微调数据集和训练数据集之间的差距过大&#xff0c;导致训练效果很差。在图像生成任务中并不明显&#xff0c;但是在视频生成任务中这个问题非常突出。这篇博客深入解读如何…

打印机删除副本以后无法安装打印机驱动

根据知乎文章解决打印机驱动副本存在多个&#xff0c;打印机驱动无法删除&#xff0c;或者驱动包无法删除等问题。的方法删除打印机副本以后发现无论如何也装不上驱动了。 要么驱动安装成功&#xff0c;但是设备仍然是指定状态。 后面发现是删错文件夹了&#xff0c;教程里让删…

顶级5款有用的免费IntelliJ插件,提升你作为Java开发者的旅程

在本文中&#xff0c;我们将深入探讨IntelliJ IDEA插件——那些可以提升你生产力的神奇附加组件&#xff0c;并微调你的代码以达到卓越。我们将探索5款免费插件&#xff0c;旨在将你的开发水平提升到一个新的高度。 1. Test Data 使用Test Data插件进行上下文操作 作为开发者&a…

一分钟学会内六角螺丝外观快速检测!

内六角螺丝是一种螺丝&#xff0c;其螺纹头部设计为六角形凹槽&#xff0c;用于接受内六角扳手或扭力扳手等工具&#xff0c;以便安装和拆卸。使得内六角螺丝在密闭空间或需要较高扭矩的情况下更容易使用&#xff0c;因为内六角工具可以提供更好的操控和扭矩传递效率。内六角螺…

使用 iconfont.ttf文件保存多个图标文件,并且像文字一样使用代码绘制出来

先看演示效果 这里的多个图标其实是存储在 iconfont.ttf文件中 这个文件里面的图标对应的编码 显示代码 void CMFCApplication3Dlg::OnBnClickedOk() {// 加载字体文件CString fontPath = _T("C:\\Users\\35497\\Desktop\\test\\MFCApplication3\\font\\iconfont.ttf&qu…

海外短剧CPS推广分佣系统平台讲解,他和短剧播放平台有啥区别?

首先来讲讲什么是海外短剧系统&#xff1f;什么是海外短剧cps系统&#xff1f;这俩有何区别&#xff1f; 海外短剧系统 顾名思义&#xff1a;就是做一套海外短剧系统&#xff0c;把剧放在自己的系统内&#xff0c;让用户来充值&#xff0c;充值的钱全部都是我自己的&#xff…

css美化滚动条样式

效果展示 实现 滚动条宽&#xff0c;高度 /* 整体滚动条 */ ::-webkit-scrollbar {width: 10px; }/* 滚动条轨道 */ ::-webkit-scrollbar-track {background-color: #ffffff;border-radius: 6px; }/* 滚动条滑块 */ ::-webkit-scrollbar-thumb {background-color: #888;borde…

JSON字符串中获取一个指定字段的值

一、方式一&#xff0c;引用gson工具 测试报文&#xff1a; {"account":"yanxiaosheng","password":"123456" } 引入pom <!-- https://mvnrepository.com/artifact/com.google.code.gson/gson --> <dependency><gr…

stm8玩耍日记1

写在前面&#xff0c;如题所示&#xff0c;这是一个stm8L051F3的玩耍记录。 环境使用的是IAR for stm8&#xff0c;使用stlink v2作为调试下载器&#xff0c;跟着st中文论坛的一个大佬的教程学习的。 整体配置下来&#xff0c;点亮了led&#xff0c;感觉和stm32的开发差不多&…

豆包Marscode体验官,体验云编程和AI助手加持的快乐

我正在参加「豆包MarsCode初体验」征文活动&#xff0c;活动链接&#xff1a;https://juejin.cn/post/7384997062416252939?utm_sourcejuejin&utm_mediumpush&utm_campaigntiyanguan Marscode官网地址&#xff1a;工作台 - MarsCode 其实早在前不久&#xff0c;我就…

数据开发人员如何真正理解业务、并构建业务模型?

问题背景 最近有同学在问&#xff0c;新到一家公司&#xff0c;如何去深入理解业务&#xff1f;并高于业务视角呢&#xff1f; 针对这个问题 &#xff0c;我们将问题进行拆分以下几点进行回答&#xff0c;首先懂业务的标准是什么&#xff1f; 根据笔者的经验将懂业务标准进行如…

openEuler AArch64 架构 vCPU 热插拔技术内幕

OpenAtom openEuler&#xff08;简称"openEuler"&#xff09;社区引领技术浪潮&#xff0c;早在openEuler 20.09 创新版本就率先使能并对外开放了 AArch64 架构 vCPU 热插特性。时隔四年&#xff0c;openEuler 24.03 LTS 版本补充了 vCPU 热拔能力&#xff0c;vCPU 热…

spring boot读取yml配置注意点记录

问题1&#xff1a;yml中配置的值加载到代码后值变了。 现场yml配置如下&#xff1a; type-maps:infos:data_register: 0ns_xzdy: 010000ns_zldy: 020000ns_yl: 030000ns_jzjz: 040000ns_ggglyggfwjz: 050000ns_syffyjz: 060000ns_gyjz: 070000ns_ccywljz: 080000ns_qtjz: 090…

Windows 11 安装 Python 3.11 完整教程

Windows 11 安装 Python 3.11 完整教程 一、安装包安装 1. 下载 Python 3.11 安装包 打开浏览器,访问 Python 官方下载页面。点击“Download Python 3.11”,下载适用于 Windows 的安装包(Windows installer)。 2. 安装 Python 3.11 运行下载的安装包 python-3.11.x-amd6…

路由器的ip地址与网关的区别是什么

在网络世界中&#xff0c;路由器扮演着至关重要的角色&#xff0c;它负责数据的传输和网络的互联。而在路由器的设置中&#xff0c;有两个常见的概念&#xff1a;IP地址和网关。那么&#xff0c;路由器的IP地址与网关的区别是什么&#xff1f;下面与虎观代理小二一起了解一下吧…

Spring Boot中使用SpringEvent组件

Spring的事件机制是基于观察者模式的实现&#xff0c;主要由以下三个部分组成&#xff1a; 事件&#xff08;Event&#xff09;&#xff1a;事件是应用中发生的重要事情&#xff0c;通常是一个继承自ApplicationEvent的类。 事件发布器&#xff08;Publisher&#xff09;&…

go——Swagger使用

一. 为什么后端需要配置Swagger 在前后端分离的项目中&#xff0c;后端配置swagger可以很好的帮助前端人员了解后端接口参数和数据传输。 Swagger是一个用于设计&#xff0c;构建和文档化API的开源框架。在Go语言中&#xff0c;Swagger可以帮助后端开发人员快速创建和定义RESTf…