1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="韩暮秋">
<meta name="subtitle" content="暮秋小屋">
<meta name="description" content="这里是暮秋小屋,思念和灵感的寄存处">
<meta name="keywords" content="韩暮秋,MuqiuHan,'Muqiu Han', 'muqiu han', muqiuhan">
<title>
Turborepo 简述 |
暮秋小屋
</title>
<link rel="icon" href="/favicon.ico">
<!-- stylesheets list from _config.yml -->
<link rel="stylesheet" href="/css/style.css">
<link rel="preload" href="/fonts/latin-base.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/cjk-common.woff2" as="font" type="font/woff2" crossorigin>
<!-- scripts list from _config.yml -->
<script
src="/js/menu.js"></script>
<script
src="https://polyfill.alicdn.com/polyfill.js?features=es6"></script>
<script
id="MathJax-script"
async
src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/mathjax/3.2.0/es5/tex-mml-chtml.js"></script>
<meta name="generator" content="Hexo 6.3.0"></head>
<body>
<div class="wrapper">
<div class="header">
<div class="flex-container">
<div class="header-inner">
<div class="site-brand-container">
<a href="/">
暮秋小屋
</a>
</div>
<div id="menu-btn" class="menu-btn" onclick="toggleMenu()">
菜单
</div>
<nav class="site-nav">
<ul class="menu-list">
<li class="menu-item">
<a href="/">
主页
</a>
</li>
<li class="menu-item">
<a href="/categories/gallery/">
日记本
</a>
</li>
<li class="menu-item">
<a href="/tags/Medicine/">
泛医学
</a>
</li>
<li class="menu-item">
<a href="/tags/Technique/">
计算机
</a>
</li>
<li class="menu-item">
<a href="/tags/Life/">
生活
</a>
</li>
<li class="menu-item">
<a href="/archives">
全部
</a>
</li>
<li class="menu-item">
<a href="/about">
关于
</a>
</li>
<li class="menu-item search-btn">
<a href="#">搜索</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="main">
<div class="flex-container">
<article id="post">
<div class="post-head">
<div class="post-info">
<div class="tag-list">
<span class="post-tag">
<a href="/tags/Technique/">
Technique
</a>
</span>
</div>
<div class="post-title">
Turborepo 简述
</div>
<span class="post-date">
Sep 27, 2024
</span>
</div>
<div class="post-img">
<div class="h-line-primary"></div>
</div>
</div>
<div class="post-content">
<h2 id="Turborepo-简介"><a class="header-anchor" href="#Turborepo-简介">¶</a>Turborepo 简介</h2>
<p>Monorepos 有很多优势,但它们难以扩展。每个工作区都有自己的测试套件、自己的 linting 和构建过程。单个 monorepo 可能有数千个任务要执行。</p>
<p>Turborepo 是一个专为 JavaScript 和 TypeScript 代码库设计的构建系统,旨在优化 monorepos 和 single-package workspace 中的任务。它通过远程缓存(remote caching)和高效的任务调度(task scheduling)来解决 monorepos 中的扩展问题。Turborepo 也可以增量部署(adopted incrementally),并与各种包管理器配合使用。</p>
<ul>
<li>远程缓存: 存储所有任务的结果,CI 就不需要重复执行相同的工作了。</li>
<li>任务调度:利用所有核心的性能并行处理任务,尽可能的加速。</li>
</ul>
<p><code>turbo</code> 基于 workspace 构建,workspaces 是 JavaScript 生态系统中包管理器的一项功能,允许将多个包分组到一个存储库中:</p>
<h3 id="Workspace"><a class="header-anchor" href="#Workspace">¶</a>Workspace</h3>
<p>在 JavaScript 中,Workspace 是指仓库中的特定实体,可以是<a target="_blank" rel="noopener" href="https://vercel.com/docs/vercel-platform/glossary#single-package-workspace">单个包</a>或<a target="_blank" rel="noopener" href="https://vercel.com/docs/vercel-platform/glossary#multi-package-workspace">包的集合</a>。<br>
包管理器的 root lock 文件(例如 <code>pnpm-lock.yaml</code>)以及任何其他配置都位于 Wrokspace 的根目录。在 Monorepo 中可以有多个工作区,每个工作区位于存储库的子目录中。</p>
<h3 id="Single-package-workspace"><a class="header-anchor" href="#Single-package-workspace">¶</a><a target="_blank" rel="noopener" href="https://vercel.com/docs/vercel-platform/glossary#single-package-workspace">Single-package workspace</a></h3>
<p>只有一个独立包的工作区,在工作区根目录下有一个 <code>package.json</code> 文件。</p>
<h3 id="Multi-package-workspace"><a class="header-anchor" href="#Multi-package-workspace">¶</a><a target="_blank" rel="noopener" href="https://vercel.com/docs/vercel-platform/glossary#multi-package-workspace">Multi-package workspace</a></h3>
<p>包含多个包的工作区,包含多个 <code>package.json</code> 文件,其中一个位于工作区根目录中用于全局配置,其他位于每个包目录中。</p>
<blockquote>
<p>这种类型的工作区通常称为 monorepo</p>
</blockquote>
<hr>
<p>以 npm 为例,turbo 会初始化一个这样的目录结构使其成为有效的 workspace:</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">|- package.json</span><br><span class="line">|- package-lock.json</span><br><span class="line">|- turbo.json</span><br><span class="line">|- apps</span><br><span class="line">|-- docs</span><br><span class="line">|--- package.json</span><br><span class="line">|-- web</span><br><span class="line">|--- package.json</span><br><span class="line">|- packages</span><br><span class="line">|--- ui</span><br></pre></td></tr></table></figure>
<p>一个 “有效的” turbo 项目至少要有:</p>
<ul>
<li>包管理器描述的包</li>
<li>包管理器的 lock 文件</li>
<li>根目录下的 <code>package.json</code></li>
<li>根目录下的 <code>turbo.json</code></li>
<li>每个包中的 <code>package.json</code></li>
</ul>
<p>例如,在根目录的 <code>package.json</code> 中配置:</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"workspaces"</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line"> <span class="string">"apps/*"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="string">"packages/*"</span></span><br><span class="line"> <span class="punctuation">]</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<p>那么 <code>apps</code> 或 <code>packages</code> 目录中有 <code>package.json</code> 的每个目录都将被视为一个包。</p>
<blockquote>
<p>注意:Turborepo 不支持嵌套包,例如 <code>apps/</code> 或 <code>packages/</code> 这种,将一个包放在<code>apps/a</code> 并将另一个包放在 <code>apps/a/b</code> 的结构将导致错误。</p>
<p>如果想按目录对包进行分组,可以使用 <code>packages/*</code> 和 <code>packages/group/*</code> 等 glob 来完成此操作,而不是创建 <code>packages/group/package.json</code> 文件。</p>
</blockquote>
<p>根目录的 <code>package.json</code> 是 workspace 的基础,常见的配置:</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"private"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"scripts"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"build"</span><span class="punctuation">:</span> <span class="string">"turbo run build"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"dev"</span><span class="punctuation">:</span> <span class="string">"turbo run dev"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"lint"</span><span class="punctuation">:</span> <span class="string">"turbo run lint"</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"devDependencies"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"turbo"</span><span class="punctuation">:</span> <span class="string">"latest"</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"packageManager"</span><span class="punctuation">:</span> <span class="string">"[email protected]"</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<p>而根目录的 <code>turbo.json</code> 用于配置 <code>turbo</code> 的行为。那些 lock 文件是包管理器和 <code>turbo</code> 用于 reproducible 的关键。此外,Turborepo 还利用它们分析工作区中<a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/core-concepts/internal-packages">内部包</a>之间的依赖关系。</p>
<hr>
<h3 id="包中的-package-json"><a class="header-anchor" href="#包中的-package-json">¶</a>包中的 <code>package.json</code></h3>
<p><a target="_blank" rel="noopener" href="https://nodejs.org/api/packages.html#name"><code>name</code> 字段</a>用于标识包。它在 workspace 中应该是唯一的。</p>
<blockquote>
<p>最佳做法是为<a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/core-concepts/internal-packages">内部包</a>使用命名空间前缀,以避免与 npm 注册表上的其他包发生冲突。例如,如果组织名为 <code>clin</code>,则可以将包命名为 <code>@clin/package-name</code>。</p>
</blockquote>
<p><code>scripts</code> 字段用于定义可在包的上下文中运行的脚本。Turborepo 将使用这些脚本的名称来确定要在包中运行的脚本(如果有)。</p>
<p><a target="_blank" rel="noopener" href="https://nodejs.org/api/packages.html#exports"><code>exports</code> 字段</a>用于指定要使用该包的其他包的入口点。如果要在另一个包中使用一个包中的代码,将从该入口点导入。</p>
<p>例如,如果有一个 <code>@repo/math</code> 包,则可以这么写 <code>exports</code> 字段:</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"exports"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"."</span><span class="punctuation">:</span> <span class="string">"./dist/constants.ts"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"./add"</span><span class="punctuation">:</span> <span class="string">"./dist/add.ts"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"./subtract"</span><span class="punctuation">:</span> <span class="string">"./dist/subtract.ts"</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<p>然后就可以从 <code>@repo/math</code> 包中导入 <code>add</code> 和 <code>subtract</code> 函数了:</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { <span class="variable constant_">GRAVITATIONAL_CONSTANT</span>, <span class="variable constant_">SPEED_OF_LIGHT</span> } <span class="keyword">from</span> <span class="string">'@repo/math'</span>;</span><br><span class="line"><span class="keyword">import</span> { add } <span class="keyword">from</span> <span class="string">'@repo/math/add'</span>;</span><br><span class="line"><span class="keyword">import</span> { subtract } <span class="keyword">from</span> <span class="string">'@repo/math/subtract'</span>;</span><br></pre></td></tr></table></figure>
<p>以这种方式使用导出有三个主要好处:</p>
<ul>
<li>避免 barrel 文件:barrel 文件是重新导出同一包中其他文件的文件,从而为整个包创建一个入口点。虽然它们可能看起来很方便,但编译器<a target="_blank" rel="noopener" href="https://vercel.com/blog/how-we-optimized-package-imports-in-next-js#what's-the-problem-with-barrel-files">和捆绑程序很难处理</a>它们,并且可能很快导致性能问题。</li>
<li>更强大的功能:与<a target="_blank" rel="noopener" href="https://nodejs.org/api/packages.html#main"><code>主</code>字段</a>(如 <a target="_blank" rel="noopener" href="https://nodejs.org/api/packages.html#conditional-exports">Conditional Exports</a>)相比,<code>exports</code> 还具有其他强大的功能。一般来说,尽可能使用 <code>exports</code> 而不是 <code>main</code> 就行了。</li>
<li>IDE 友好:通过使用 <code>export</code> 指定包的入口点,代码编辑器可以为包的导出提供自动完成。</li>
</ul>
<hr>
<p>除此之外还有 <code>import</code> 字段,也就是一种创建包中其他模块的子路径的方法。可以简单地视为 “快捷方式” ,用于编写更简单的导入路径,这些路径对日后文件被移动后的重构更具弹性。</p>
<blockquote>
<p>其他:包通常使用 <code>src</code> 目录来存储其源代码并编译到 <code>dist</code> 目录(也应位于包中)。</p>
</blockquote>
<h2 id="管理依赖项"><a class="header-anchor" href="#管理依赖项">¶</a>管理依赖项</h2>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"dependencies"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"next"</span><span class="punctuation">:</span> <span class="string">"latest"</span><span class="punctuation">,</span> <span class="comment">// 外部依赖</span></span><br><span class="line"> <span class="attr">"@repo/ui"</span><span class="punctuation">:</span> <span class="string">"*"</span> <span class="comment">// 内部依赖</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<p>在存储库中安装依赖项时,应将其直接安装在使用它的软件包中。包的 <code>package.json</code> 将包含所需的每个依赖项。外部和内部依赖项都是如此。</p>
<p>要在多个包中快速安装依赖项,可以:</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install jest --workspace=web --workspace=@repo/ui --save-dev</span><br></pre></td></tr></table></figure>
<p>这种做法有几个好处:</p>
<ul>
<li>更清晰:当软件包的依赖项列在其 <code>package.json</code> 中时,更容易理解软件包所依赖的内容。在存储库中工作的开发人员可以一目了然地看到包中使用了哪些依赖项。</li>
<li>更具灵活性:在大规模的 monorepo 中,想让每个包都使用相同版本的外部依赖项可能是不现实的。当有许多团队在同一个代码库中工作时,优先级、时间表和需求会有所不同。通过在 “使用它们的包” 中安装依赖项,可以让 <code>UI</code> 团队能够升级到最新版本的 TypeScript,而 <code>Web</code> 团队可以优先发布新功能并在以后使用 TypeScript。</li>
<li>更好的缓存能力:如果在存储库的根目录中安装了太多依赖项,则每当添加、更新或删除依赖项时,都会更改工作区根目录,从而导致不必要的缓存未命中。</li>
<li>修剪未使用的依赖项:对于 Docker 用户,<a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/reference/prune">Turborepo 的修剪功能</a>可以从 Docker 镜像中删除未使用的依赖项,以创建更轻量级的镜像。当依赖项安装在它们所适用的包中时,Turborepo 可以读取锁文件并删除所需的包中未使用的依赖项。</li>
</ul>
<blockquote>
<p>属于工作区根目录的唯一依赖项是用于管理存储库的工具,而用于构建应用程序和库的依赖项安装在各自的包中。一些适合安装在根中的依赖项示例包括 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/turbo"><code>turbo</code></a>、<a target="_blank" rel="noopener" href="https://www.npmjs.com/package/husky"><code>husky</code></a> 或 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/lint-staged"><code>lint-staged</code></a>。</p>
</blockquote>
<h3 id="保持同一版本的依赖"><a class="header-anchor" href="#保持同一版本的依赖">¶</a>保持同一版本的依赖</h3>
<p>一些 monorepo 维护者更喜欢按照规则在所有软件包中保持对相同版本的依赖关系。有几种方法可以实现此目的:</p>
<ul>
<li>使用专用的工具,比如 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/syncpack"><code>syncpack</code></a>、<a target="_blank" rel="noopener" href="https://www.npmjs.com/package/@manypkg/cli"><code>manypkg</code></a> 和 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/sherif"><code>sherif</code></a> 等工具可用于此特定目的。</li>
<li>或者单纯的使用包管理器,可以使用软件包管理器通过一个命令更新依赖项版本:
<ul>
<li><code>npm install typescript@latest --workspaces</code></li>
</ul>
</li>
<li>或者最粗暴的用编辑器一次查找并替换存储库中所有 <code>package.json</code> 文件的依赖项版本。用 <code>“next”: “.*”</code> 之类的正则表达式来查找并替换为所需的版本。完成后再运行包管理器的 install 命令来更新 lock 文件.</li>
</ul>
<h2 id="内部包"><a class="header-anchor" href="#内部包">¶</a>内部包</h2>
<p><a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/core-concepts/internal-packages">内部包</a>是工作区的构建块(building blocks),是一种在存储库中共享代码的强大方式。Turborepo 读取 <code>package.json</code> 中的依赖项来分析内部包之间的关系,并在后台创建 <a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/core-concepts/package-and-task-graph#package-graph">Package Graph</a> 以优化存储库的工作流程。</p>
<p>在创建内部包时,建议创建具有单一 “用途” 的包。这是最佳实践,具体取决于存储库的规模、组织、团队需求等。此策略具有以下几个优点:</p>
<ul>
<li>更易于理解:随着存储库的扩展,在存储库中工作的开发人员将能够更轻松地找到他们需要的代码。</li>
<li>减少每个包的依赖项:每个包使用更少的依赖项,以便 Turborepo 可以更有效地<a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/reference/prune">修剪包图的依赖项</a>。</li>
</ul>
<p>在创建<a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/core-concepts/package-types#application-packages">应用程序包</a>时,最好避免将共享代码放在这些包中。相反,应该为共享代码创建一个单独的包,并让应用程序包依赖于该包。<br>
此外,应用程序包不应安装到其他包中。相反,应将它们视为 <a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/core-concepts/package-and-task-graph#package-graph">Package Graph</a> 的入口点。</p>
<h2 id="配置任务"><a class="header-anchor" href="#配置任务">¶</a>配置任务</h2>
<p>Turborepo 将始终按照 <a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/reference/configuration"><code>turbo.json</code> 配置</a>和 <a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/core-concepts/package-and-task-graph#package-graph">Package Graph</a> 中描述的顺序运行任务,并尽可能并行化工作以确保一切尽可能快地运行。</p>
<p>根目录的 <code>turbo.json</code> 文件是注册 Turborepo 将运行的任务的位置。定义任务后,将能够使用 <a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/reference/run"><code>turbo run</code></a> 运行一个或多个任务。</p>
<p><code>tasks</code> 对象中的每个 key 都是一个可以通过 <code>turbo run</code> 执行的任务。Turborepo 将在 <code>package.json</code> 中搜索与任务同名的软件包:</p>
<p><a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/reference/configuration#dependson"><code>dependsOn</code> 键</a>用于指定在其他任务开始运行之前必须完成的任务。在大多数情况下,库的<code>build</code>脚本在应用程序的<code>build</code>脚本运行之前完成,所以可以这么写:</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"tasks"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"build"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"dependsOn"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"^build"</span><span class="punctuation">]</span> </span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p><code>^</code> 这个语法告诉 Turborepo 从依赖关系图的底部开始运行任务。如果应用程序依赖于名为 <code>ui</code> 的库,并且该库具有<code>build</code>任务,则 <code>ui</code> 中的<code>build</code>脚本将首先运行。成功完成后,才会运行应用程序中的<code>build</code>任务。<br>
这是一个重要的形式,因为它可以确保应用程序的<code>build</code>任务具有编译所需的所有必要依赖项。当依赖关系图发展到具有多个级别的任务依赖关系的更复杂的结构时,此概念也适用。</p>
</blockquote>
<p>有时可能需要确保同一包中的两个任务按特定顺序运行。例如需要先在库中运行<code>build</code>任务,然后再在同一库中运行<code>test</code>任务。这种情况删掉 <code>^</code> 就行了:</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"tasks"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"test"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"dependsOn"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"build"</span><span class="punctuation">]</span> </span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<p>还可以在特定包中指定要依赖的单个任务。例如在任何 <code>lint</code> 任务之前运行 <code>utils</code> 中的<code>build</code>任务:</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"tasks"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"lint"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"dependsOn"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"utils#build"</span><span class="punctuation">]</span> </span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<p>或者更加细致的限定 <code>lint</code>:</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"tasks"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"web#lint"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"dependsOn"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"utils#build"</span><span class="punctuation">]</span> </span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<p>即 <code>Web 包中的</code> <code>lint</code> 任务只能在 <code>utils</code> 包中的<code>build</code>任务完成后运行。</p>
<p>某些任务可能没有任何依赖项。例如用于在 Markdown 文件中查找拼写错误的任务可能不需要关心其他任务的状态。在这种情况下,省略 <code>dependsOn</code> 键或给个空数组就行了:</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"tasks"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"spell-check"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"dependsOn"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">]</span> </span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<h3 id="指定输入输出"><a class="header-anchor" href="#指定输入输出">¶</a>指定输入输出</h3>
<p><code>outputs</code> 键告诉 Turborepo 文件和目录在任务成功完成时应该缓存在哪。如果未定义此 key,Turborepo 将不会缓存任何文件。</p>
<p>例如缓存 vite 的输出一般可以这么写:</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"tasks"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"build"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"outputs"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"dist/"</span><span class="punctuation">]</span> </span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<p><code>inputs</code> 键用于指定要包含在任务哈希中以进行<a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/crafting-your-repository/caching">缓存</a>的文件。默认情况下,Turborepo 将包含包中由 Git 跟踪的所有文件。但是也可以使用 <code>inputs</code> 键更具体地说明哈希中包含哪些文件, 例如,在 Markdown 文件中查找拼写错误的任务可以定义如下::</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"tasks"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"spell-check"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"inputs"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"/*.md"</span><span class="punctuation">,</span> <span class="string">"/*.mdx"</span><span class="punctuation">]</span> </span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<p>可以通过微调 <code>input</code> 以忽略对已知不会影响任务输出的文件的更改来提高某些任务的缓存命中率, 可以使用 <code>$TURBO_DEFAULT$</code> 微语法来微调默认 <code>input</code> 行为:</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"tasks"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"build"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"inputs"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"$TURBO_DEFAULT$"</span><span class="punctuation">,</span> <span class="string">"!README.md"</span><span class="punctuation">]</span> </span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<p>这里 Turborepo 使用<code>build</code>任务的默认<code>input</code>,但会忽略对 <code>README.md</code> 文件的更改。如果 <code>README.md</code> 文件发生更改,任务仍将用上缓存。</p>
<h3 id="Root-任务"><a class="header-anchor" href="#Root-任务">¶</a>Root 任务</h3>
<p>还可以使用 <code>turbo</code> 在 Workspace 根的 <code>package.json</code>中运行脚本。例如,除了每个软件包中的 <code>lint</code> 任务外,可能还需要对 Workspace 根目录中的文件运行 <code>lint:root</code> 任务:</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"tasks"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"lint"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"dependsOn"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"^lint"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"//#lint:root"</span><span class="punctuation">:</span> <span class="punctuation">{</span><span class="punctuation">}</span> </span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<h3 id="其他"><a class="header-anchor" href="#其他">¶</a>其他</h3>
<ul>
<li><a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/reference/package-configurations">包配置</a>是直接放入包中的<code>turbo.json</code>文件。这允许软件包为其自己的任务定义特定行为,而不会影响存储库的其余部分。</li>
<li>有一些始终需要运行的任务,例如缓存生成后的部署脚本。对于这些任务,用 <code>“cache”: false</code> :</li>
</ul>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"tasks"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"deploy"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"dependsOn"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"^build"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"cache"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"build"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"outputs"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"dist/"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<ul>
<li>某些任务可以并行运行,例如 Linter 不需要等待依赖项中的输出成功才能运行:</li>
</ul>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"tasks"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"transit"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"dependsOn"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"^transit"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"check-types"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"dependsOn"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"transit"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>这里用到了 <a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/core-concepts/package-and-task-graph#transit-nodes">Transit Nodes</a> (就是名为 <code>transit</code> 的任务),这些 Transit Node 使用不执行任何操作的任务在软件包依赖项之间创建关系,这里用了名称 <code>transit</code>,但可以将任务命名为 Workspace 中尚未包含脚本的任何名称。</p>
</blockquote>
<h2 id="正在运行的任务"><a class="header-anchor" href="#正在运行的任务">¶</a>正在运行的任务</h2>
<p>当在软件包的目录中时,<code>turbo</code> 会自动将命令范围限定为该软件包的 <a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/core-concepts/package-and-task-graph#package-graph">Package Graph</a>:</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd apps/docs</span><br><span class="line">turbo build</span><br></pre></td></tr></table></figure>
<p>将使用 <code>turbo.json</code> 中注册的<code>build</code>任务运行 <code>docs</code> 包的<code>build</code>任务。</p>
<blockquote>
<p>但也可以<a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/crafting-your-repository/running-tasks#using-filters">使用过滤器</a>覆盖 Automatic Package Scoping。</p>
</blockquote>
<h3 id="运行多个任务"><a class="header-anchor" href="#运行多个任务">¶</a>运行多个任务</h3>
<p><code>Turbo</code> 能够运行多个任务,并尽可能并行化:</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">turbo run build test lint check-types</span><br></pre></td></tr></table></figure>
<h2 id="缓存"><a class="header-anchor" href="#缓存">¶</a>缓存</h2>
<p>Turborepo 的缓存在本地工作时可以节省大量时间 - 启用<a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/core-concepts/remote-caching">远程缓存</a>时,它的功能更加强大,可在整个团队和 CI 之间共享缓存。</p>
<h3 id="缓存什么?"><a class="header-anchor" href="#缓存什么?">¶</a>缓存什么?</h3>
<ul>
<li>在 <a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/reference/configuration#outputs"><code>turbo.json 的 outputs</code> 键</a>中定义的任务的文件输出。</li>
<li>任务的终端输出,从任务第一次运行时开始将这些日志恢复到终端。</li>
<li>对输入进行哈希处理,为任务运行创建一个 “fingerprints”。当 “fingerprints” 匹配时,运行任务将命中缓存。</li>
</ul>
<h3 id="其他-v2"><a class="header-anchor" href="#其他-v2">¶</a>其他</h3>
<ul>
<li><a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/reference/run#--dry----dry-run"><code>--dry</code> 标志</a>,可用于查看如果在没有实际运行任务的情况下运行任务会发生什么。当不确定正在运行的任务时,这对于调试缓存问题非常有用。</li>
<li><a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/reference/run#--summarize"><code>--summarize</code> 标志</a>,可用于获取任务的所有输入、输出等的概览。比较两个摘要将揭示两个任务的哈希值不同的原因。</li>
<li>强制 <code>turbo</code> 重新执行已缓存的任务,请使用 <a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/reference/run#--force"><code>--force</code> 标志</a>。请注意,这将禁用读取缓存,而不是写入。</li>
</ul>
<h2 id="开发工作流"><a class="header-anchor" href="#开发工作流">¶</a>开发工作流</h2>
<p>在 <code>turbo.json</code> 中定义开发任务 (development task) 会告诉 Turborepo 将运行一个长期任务。这对于运行开发服务器、运行测试或构建应用程序等操作非常有用:</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"tasks"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"dev"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"cache"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"persistent"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<ul>
<li><code>"cache": false</code>:告诉 Turborepo 不要尝试缓存任务的结果。由于这是一项开发任务,可能会频繁更改代码,因此缓存结果没有用。</li>
<li><code>"persistent": true</code>:告诉 Turborepo 保持任务运行,直到停止它。此键用作终端 UI 的信号,用于将任务视为长时间运行和交互式任务。此外,它还可以防止意外依赖不会退出的任务。</li>
</ul>
<p>一些脚本允许使用 <code>stdin</code> 在其中键入以进行交互式输入。使用<a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/reference/configuration#ui">终端 UI</a>,可以选择一个任务,输入它,然后像往常一样使用 <code>stdin</code>。</p>
<p>需要运行用于设置开发环境或预构建包的脚本。可以使用 <code>dependsOn</code> 确保这些任务在 <code>dev</code> 任务之前运行:</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"tasks"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"dev"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"cache"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"persistent"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"dependsOn"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"//#dev:setup"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"//#dev:setup"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"outputs"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">".codegen/"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<p>这里用的是 <a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/crafting-your-repository/configuring-tasks#registering-root-tasks">Root Task</a>,但可以对 <a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/crafting-your-repository/configuring-tasks#depending-on-a-specific-task-in-a-specific-package">packages 中的任意任务</a>使用相同的思路。</p>
<h3 id="Watch-mode"><a class="header-anchor" href="#Watch-mode">¶</a>Watch mode</h3>
<p>许多工具都有一个内置的 watcher,比如 <a target="_blank" rel="noopener" href="https://www.typescriptlang.org/docs/handbook/compiler-options.html#compiler-options"><code>tsc --watch</code></a>,它会响应源代码中的更改。有些则没有,<code>Turbo Watch</code> 为任何工具添加了依赖项感知的 Watcher。对源代码的更改将遵循在 <code>turbo.json</code> 中描述的 <a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/core-concepts/package-and-task-graph#task-graph">Task Graph (任务图</a>),例如:</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"tasks"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"dev"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"persistent"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">true</span></span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"cache"</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span></span><br><span class="line"> <span class="punctuation">}</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"lint"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"dependsOn"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"^lint"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<p>当运行 <code>turbo watch dev lint</code> 时,会看到每当更改源代码时,<code>lint</code> 脚本都会重新运行,尽管 ESLint 没有内置的 watcher。<code>Turbo Watch</code> 还知道内部依赖关系,因此 <code>@repo/UI</code> 中的代码更改将在 <code>@repo/UI</code> 和 <code>Web</code> 中重新运行任务。</p>
<h2 id="环境变量"><a class="header-anchor" href="#环境变量">¶</a>环境变量</h2>
<p>Turborepo 需要根据环境变量来决定是否改变应用程序的行为。在 <code>turbo.json</code> 文件中使用 <code>env</code> 和 <code>globalEnv</code> 键:</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"globalEnv"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"IMPORTANT_GLOBAL_VARIABLE"</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"tasks"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"build"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"env"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"MY_API_URL"</span><span class="punctuation">,</span> <span class="string">"MY_API_KEY"</span><span class="punctuation">]</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<ul>
<li><code>globalEnv</code>:更改此列表中任何环境变量的值都将更改所有任务的哈希值。</li>
<li><code>env</code>:包括对影响任务的环境变量值的更改,从而实现更好的粒度。例如,当 <code>API_KEY</code> 的值发生变化时,<code>lint</code> 任务可以继续用缓存,但<code>build</code>任务应该不用。</li>
</ul>
<blockquote>
<p>Turborepo 会自动将前缀通配符添加到常见框架的 <a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/reference/configuration#env"><code>env</code></a> 键中 (### <a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/crafting-your-repository/using-environment-variables#framework-inference">Framework Inference</a>)</p>
</blockquote>
<h3 id="Environment-mode"><a class="header-anchor" href="#Environment-mode">¶</a>Environment mode</h3>
<p>Turborepo 的 Environment Mode 允许控制哪些环境变量在运行时可用于任务:</p>
<ul>
<li><a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/crafting-your-repository/using-environment-variables#strict-mode">严格模式</a>(默认):将环境变量过滤为仅在 <code>turbo.json</code> 的 <code>env</code> 和 <code>globalEnv</code> 键中指定的环境变量。</li>
<li><a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/crafting-your-repository/using-environment-variables#loose-mode">宽松模式</a>:允许进程的所有环境变量可用。</li>
</ul>
<h3 id="其他-v3"><a class="header-anchor" href="#其他-v3">¶</a>其他</h3>
<ul>
<li><code>.env</code> 文件非常适合在本地处理应用程序。Turborepo 不会将 .env 文件加载到任务的运行时中,而是让它们由框架或 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/dotenv"><code>dotenv</code></a> 等工具处理。但是,<code>turbo</code> 必须知道 <code>.env</code> 文件中值的更改,以便它可以将它们用于哈希。如果在两次构建之间更改 <code>.env</code> 文件中的变量,则 <code>build</code> 任务应该不会用上缓存。所以可以将其添加到 <code>input</code> 键中:</li>
</ul>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"globalDependencies"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">".env"</span><span class="punctuation">]</span><span class="punctuation">,</span> <span class="comment">// All task hashes</span></span><br><span class="line"> <span class="attr">"tasks"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"build"</span><span class="punctuation">:</span> <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"inputs"</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">"$TURBO_DEFAULT$"</span><span class="punctuation">,</span> <span class="string">".env"</span><span class="punctuation">,</span> <span class="string">".env.local"</span><span class="punctuation">]</span> <span class="comment">// Only the `build` task hash</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"> <span class="punctuation">}</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure>
<ul>
<li>不建议在存储库的根目录中使用 <code>.env</code> 文件。相反,建议将 <code>.env</code> 文件放入使用它们的包中。</li>
<li><a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/reference/eslint-config-turbo"><code>eslint-config-turbo</code> 软件包</a>可帮助查找代码中使用但未在 <code>turbo.json</code>中列出的环境变量。这有助于确保在配置中考虑所有环境变量。</li>
<li>Turborepo 在任务开始时对任务的环境变量进行哈希处理。如果在任务期间创建或更改环境变量,Turborepo 将不知道这些更改,也不会在任务哈希中考虑这些更改。</li>
</ul>
<hr>
<h2 id="最后"><a class="header-anchor" href="#最后">¶</a>最后</h2>
<ul>
<li><a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/crafting-your-repository/constructing-ci">配置 CI</a></li>
<li><a target="_blank" rel="noopener" href="https://turbo.build/repo/docs/core-concepts">核心概念</a></li>
</ul>
<blockquote>
<p>本快速入门文档参照 Turborepo 2.x 官方文档: <a target="_blank" rel="noopener" href="https://turbo.build/repo/docs">https://turbo.build/repo/docs</a><br>
最后一次编辑:二〇二四年九月二十七日下午六点〇七分</p>
</blockquote>
</div>
<script>
window.onload = detectors();
</script>
<div class="post-footer">
<div class="h-line-primary"></div>
<nav class="post-nav">
<div class="prev-item">
<div class="icon arrow-left"></div>
<div class="post-link">
<a href="/2024/10/06/Obsidian-Vault-%E7%9A%84-obsidian-%E7%9B%AE%E5%BD%95%E4%B8%AD%E7%9A%84%E5%90%84%E6%96%87%E4%BB%B6%E4%BD%9C%E7%94%A8/">Prev</a>
</div>
</div>
<div class="next-item">
<div class="icon arrow-right"></div>
<div class="post-link">
<a href="/2024/09/15/%E8%82%A9%E5%91%A8%E7%82%8E%E5%92%8C%E8%82%A9%E8%A2%96%E6%8D%9F%E4%BC%A4%E7%9A%84%E5%8C%BA%E5%88%AB/">Next</a>
</div>
</div>
</nav>
</div>
<div class="post-comment">
</div>
</article>
</div>
</div>
<div class="footer">
<div class="flex-container">
<div class="footer-text">
韩暮秋 |
希望路过的人可以添点柴火让这里暖和点
</div>
</div>
</div>
</div>
<div class="search-popup">
<div class="search-popup-overlay">
</div>
<div class="search-popup-window" >
<div class="search-header">
<div class="search-input-container">
<input autocomplete="off" autocapitalize="off" maxlength="80"
placeholder="Search Anything" spellcheck="false"
type="search" class="search-input">
</div>
<div class="search-close-btn">
<div class="icon close-btn"></div>
</div>
</div>
<div class="search-result-container">
</div>
</div>
</div>
<script>
const searchConfig = {
path : "/search.xml",
top_n_per_article: "1",
unescape : "false",
trigger: "auto",
preload: "false"
}
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/search.js"></script>
<script src="/js/search.js"></script>
<script src="/js/mermaid-zoom.js"></script>
</body>
</html>
|