Skip to content

Commit 20cfcad

Browse files
committed
feat!: the epic rolldown-vite merge
1 parent eb1a701 commit 20cfcad

20 files changed

+544
-471
lines changed

.vitepress/config.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -308,10 +308,6 @@ export default defineConfig({
308308
text: 'パフォーマンス',
309309
link: '/guide/performance',
310310
},
311-
{
312-
text: 'Rolldown',
313-
link: '/guide/rolldown',
314-
},
315311
{
316312
text: `v${viteMajorVersion - 1} からの移行`,
317313
link: '/guide/migration',

config/build-options.md

Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212

1313
もうひとつの特別な値は `'esnext'` で、これはネイディブの動的インポートをサポートしていることを前提としており、最小限のトランスパイルのみが実行されます。
1414

15-
変換は esbuild で実行され、この値は有効な [esbuild の target オプション](https://esbuild.github.io/api/#target)でなければいけません。カスタムターゲットは ES のバージョン(例: `es2015`)、バージョン付きのブラウザー(例: `chrome58`)、または複数のターゲットの文字列の配列を指定できます。
15+
変換は Oxc Transformer で実行され、この値は有効な [Oxc Transformer の target オプション](https://oxc.rs/docs/guide/usage/transformer/lowering#target)でなければいけません。カスタムターゲットは ES のバージョン(例: `es2015`)、バージョン付きのブラウザー(例: `chrome58`)、または複数のターゲットの文字列の配列を指定できます。
1616

17-
esbuild で安全にトランスパイルできない機能がコードに含まれていると、ビルドが失敗するので注意してください。詳細は [esbuild のドキュメント](https://esbuild.github.io/content-types/#javascript)を参照してください。
17+
Oxc で安全にトランスパイルできない機能がコードに含まれていると、ビルドは警告を出力するので注意してください。詳細は [Oxc のドキュメント](https://oxc.rs/docs/guide/usage/transformer/lowering#warnings)を参照してください。
1818

1919
## build.modulePreload
2020

@@ -129,10 +129,16 @@ CSS コード分割を有効/無効にします。有効にすると、非同期
129129

130130
## build.cssMinify
131131

132-
- **型:** `boolean | 'esbuild' | 'lightningcss'`
133-
- **デフォルト:** クライアントは [`build.minify`](#build-minify) と同じで、SSR は `'esbuild'`
132+
- **型:** `boolean | 'lightningcss' | 'esbuild'`
133+
- **デフォルト:** クライアントは [`build.minify`](#build-minify) と同じで、SSR は `'lightningcss'`
134134

135-
このオプションによって、デフォルトの `build.minify` を使うのではなく、CSS ミニファイを具体的に上書きすることで、JS と CSS のミニファイを別々に設定できるようになります。Vite はデフォルトでは `esbuild` を使用して CSS をミニファイしています。`'lightningcss'` を指定すると代わりに [Lightning CSS](https://lightningcss.dev/minification.html) を使用します。指定した場合は、 [`css.lightningcss`](./shared-options.md#css-lightningcss) を使用して設定ができます。
135+
このオプションによって、デフォルトの `build.minify` を使うのではなく、CSS ミニファイを具体的に上書きすることで、JS と CSS のミニファイを別々に設定できるようになります。Vite はデフォルトでは [Lightning CSS](https://lightningcss.dev/minification.html) を使用して CSS をミニファイしています。[`css.lightningcss`](./shared-options.md#css-lightningcss) を使用して設定ができます。`'esbuild'` を指定すると代わりに esbuild を使用します。
136+
137+
`'esbuild'` に設定する場合は esbuild のインストールが必要です。
138+
139+
```sh
140+
npm add -D esbuild
141+
```
136142

137143
## build.sourcemap
138144

@@ -141,17 +147,20 @@ CSS コード分割を有効/無効にします。有効にすると、非同期
141147

142148
本番用のソースマップを作成します。`true` の場合、ソースマップファイルは別に作られます。`inline` の場合、ソースマップは出力結果ファイルにデータ URI として追加されます。`hidden``true` と同様に動作しますが、バンドルファイル内のソースマップを指し示すコメントは記述されません。
143149

144-
## build.rollupOptions
150+
## build.rolldownOptions
145151

146-
- **型:** [`RollupOptions`](https://rollupjs.org/configuration-options/)
152+
- **型:** [`RolldownOptions`](https://rollupjs.org/configuration-options/)
147153

148-
基礎となる Rollup バンドルを直接カスタマイズします。これは、Rollup 設定ファイルからエクスポートされるオプションと同じで、Vite 内部の Rollup オプションにマージされます。詳細は [Rollup options docs](https://rollupjs.org/configuration-options/) を参照してください。
154+
<!-- TODO: update the link above and below to Rolldown's documentation -->
149155

150-
## build.commonjsOptions
156+
基礎となる Rolldown バンドルを直接カスタマイズします。これは、Rolldown 設定ファイルからエクスポートされるオプションと同じで、Vite 内部の Rolldown オプションにマージされます。詳細は [Rolldown options docs](https://rollupjs.org/configuration-options/) を参照してください。
151157

152-
- **型:** [`RollupCommonJSOptions`](https://github.com/rollup/plugins/tree/master/packages/commonjs#options)
158+
## build.rollupOptions
159+
160+
- **型:** `RolldownOptions`
161+
- **非推奨**
153162

154-
[@rollup/plugin-commonjs](https://github.com/rollup/plugins/tree/master/packages/commonjs) に渡すオプションです
163+
このオプションは `build.rolldownOptions` オプションのエイリアスです。代わりに `build.rolldownOptions` オプションを使用してください
155164

156165
## build.dynamicImportVarsOptions
157166

@@ -160,6 +169,8 @@ CSS コード分割を有効/無効にします。有効にすると、非同期
160169

161170
[@rollup/plugin-dynamic-import-vars](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars) に渡すオプションです。
162171

172+
<!-- TODO: we need to have a more detailed explanation here as we no longer use @rollup/plugin-dynamic-import-vars. we should say it's compatible with it though -->
173+
163174
## build.lib
164175

165176
- **型:** `{ entry: string | string[] | { [entryAlias: string]: string }, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string | ((format: ModuleFormat, entryName: string) => string), cssFileName?: string }`
@@ -256,16 +267,19 @@ SSR ビルドの間、静的アセットはクライアントビルドの一部
256267

257268
## build.minify
258269

259-
- **型:** `boolean | 'terser' | 'esbuild'`
260-
- **デフォルト:** クライアントビルドは `'esbuild'`、SSR ビルドでは `false`
270+
- **型:** `boolean | 'oxc' | 'terser' | 'esbuild'`
271+
- **デフォルト:** クライアントビルドは `'oxc'`、SSR ビルドでは `false`
261272

262-
ミニファイを無効にするには `false` を設定するか、使用するミニファイツールを指定します。デフォルトは [esbuild](https://github.com/evanw/esbuild) で、これは terser に比べて 20~40 倍速く、圧縮率は 1~2%だけ低下します。[ベンチマーク](https://github.com/privatenumber/minification-benchmarks)
273+
ミニファイを無効にするには `false` を設定するか、使用するミニファイツールを指定します。デフォルトは [Oxc Minifier](https://oxc.rs/docs/guide/usage/minifier) で、これは terser に比べて 30~90 倍速く、圧縮率は 0.5~2%だけ低下します。[ベンチマーク](https://github.com/privatenumber/minification-benchmarks)
274+
275+
`build.minify: 'esbuild'` は非推奨であり、将来削除される予定です。
263276

264277
pure アノテーションを取り除きツリーシェイクをできなくするため、ライブラリーモードで `'es'` フォーマットを使用する場合、`build.minify` オプションは空白文字をミニファイしないので注意してください。
265278

266-
`'terser'` を設定したときには、terser のインストールが必要です。
279+
`'esbuild'` または `'terser'` を設定したときには、それぞれ esbuild または Terser のインストールが必要です。
267280

268281
```sh
282+
npm add -D esbuild
269283
npm add -D terser
270284
```
271285

@@ -314,6 +328,8 @@ gzip 圧縮されたサイズレポートを有効/無効にします。大き
314328

315329
## build.watch
316330

331+
<!-- TODO: update the link below to Rolldown's documentation -->
332+
317333
- **型:** [`WatcherOptions`](https://rollupjs.org/configuration-options/#watch)`| null`
318334
- **デフォルト:** `null`
319335

config/dep-optimization-options.md

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,23 @@ export default defineConfig({
5151
});
5252
```
5353

54+
## optimizeDeps.rolldownOptions <NonInheritBadge />
55+
56+
- **型:** [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)`<``RolldownOptions`, `'input' | 'logLevel' | 'output'> & {
57+
output?: [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)`<`
58+
`RolldownOutputOptions`,
59+
`'format' | 'sourcemap' | 'dir' | 'banner'>`
60+
`}`
61+
62+
<!-- TODO: add link to RolldownOptions -->
63+
<!-- TODO: add link to RolldownOutputOptions -->
64+
65+
依存関係のスキャンと最適化の際、Rolldown に渡すオプション。
66+
67+
いくつかのオプションは、変更すると Vite の依存関係の最適化と互換性がなくなるため、省略されています。
68+
69+
- `plugins` は Vite の依存関係プラグインとマージされます
70+
5471
## optimizeDeps.esbuildOptions <NonInheritBadge />
5572
<!-- textlint-disable -->
5673
- **型:** [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)`<`[`EsbuildBuildOptions`](https://esbuild.github.io/api/#general-options)`,
@@ -64,13 +81,9 @@ export default defineConfig({
6481
| 'outbase'
6582
| 'outExtension'
6683
| 'metafile'>`
84+
- **非推奨**
6785
<!-- textlint-enable -->
68-
依存関係のスキャンと最適化の際、 esbuild に渡すオプション。
69-
70-
いくつかのオプションは、変更すると Vite の依存関係の最適化と互換性がなくなるため、省略されています。
71-
72-
- `external` も省略されています。Vite の `optimizeDeps.exclude` オプションを使用してください
73-
- `plugins` は Vite の依存関係プラグインとマージされます
86+
このオプションは内部的に `optimizeDeps.rolldownOptions` に変換されます。代わりに `optimizeDeps.rolldownOptions` を使用してください。
7487

7588
## optimizeDeps.force <NonInheritBadge />
7689

config/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ vite --config my-config.js
2323
```
2424

2525
::: tip 設定の読み込み
26-
デフォルトでは、Vite は `esbuild` を使用して設定を一時ファイルにバンドルし、読み込みます。これはモノレポ内で TypeScript をインポートする際に問題を引き起こす可能性があります。このアプローチで問題が起きた場合は、代わりに [module runner](/guide/api-environment-runtimes.html#modulerunner) を使用するように `--configLoader runner` を指定できます。これにより、一時的な設定が作成されなくなり、すべてのファイルがその場で変換されるようになります。モジュールランナーは設定ファイル内では CJS をサポートしていませんが、外部の CJS パッケージは通常通りに機能するはずです。
26+
デフォルトでは、Vite は [Rolldown](https://rolldown.rs/) を使用して設定を一時ファイルにバンドルし、読み込みます。これはモノレポ内で TypeScript をインポートする際に問題を引き起こす可能性があります。このアプローチで問題が起きた場合は、代わりに [module runner](/guide/api-environment-runtimes.html#modulerunner) を使用するように `--configLoader runner` を指定できます。これにより、一時的な設定が作成されなくなり、すべてのファイルがその場で変換されるようになります。モジュールランナーは設定ファイル内では CJS をサポートしていませんが、外部の CJS パッケージは通常通りに機能するはずです。
2727

2828
あるいは、TypeScript をサポートする環境(例:`node --experimental-strip-types`)を使用している場合、またはプレーンな JavaScript のみを記述している場合は、`--configLoader native` を指定して、環境のネイティブランタイムを使用して設定ファイルを読み込むことができます。設定ファイルによってインポートされたモジュールの更新は検出されないため、Vite サーバーは自動的に再起動されないことに注意してください。
2929
:::

config/shared-options.md

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ config でこれを指定すると、**serve と build 両方**のデフォル
4040

4141
グローバル定数の置換を定義します。エントリーは開発時にグローバルで定義され、ビルド時に静的に置き換えられます。
4242

43-
Vite は [esbuild の define](https://esbuild.github.io/api/#define) を使って置換を行うので、値の式は JSON でシリアライズ可能な値(null、boolean、数値、文字列、配列、オブジェクト)または単一の識別子を含む文字列でなければなりません。文字列以外の値の場合、Vite は自動的に `JSON.stringify` で文字列に変換します。
43+
Vite は [Oxc の define 機能](https://oxc.rs/docs/guide/usage/transformer/global-variable-replacement#define) を使って置換を行うので、値の式は JSON でシリアライズ可能な値(null、boolean、数値、文字列、配列、オブジェクト)または単一の識別子を含む文字列でなければなりません。文字列以外の値の場合、Vite は自動的に `JSON.stringify` で文字列に変換します。
4444

4545
**例:**
4646

@@ -96,6 +96,8 @@ declare const __APP_VERSION__: string
9696
9797
[エントリーオプション](https://github.com/rollup/plugins/tree/master/packages/alias#entries)として `@rollup/plugin-alias` に渡されます。`{ find, replacement, customResolver }` の配列か、オブジェクトを指定します。
9898
99+
<!-- TODO: we need to have a more detailed explanation here as we no longer use @rollup/plugin-alias. we should say it's compatible with it though -->
100+
99101
ファイルシステムのパスにエイリアスを設定する場合は、必ず絶対パスを使用してください。相対的なエイリアス値はそのまま使用され、ファイルシステムのパスには解決されません。
100102
101103
より高度なカスタム解決は[プラグイン](/guide/api-plugin)によって実現できます。
@@ -353,36 +355,44 @@ Lightning CSS の設定。すべての変換オプションは [Lightning CSS
353355

354356
`'auto'` に設定すると、[データが 10kB より大きい](https://v8.dev/blog/cost-of-javascript-2019#json:~:text=A%20good%20rule%20of%20thumb%20is%20to%20apply%20this%20technique%20for%20objects%20of%2010%20kB%20or%20larger) 場合にのみデータが文字列化されます。
355357

356-
## esbuild
358+
## oxc
357359

358-
- **型:** `ESBuildOptions | false`
360+
- **型:** `OxcOptions | false`
359361

360-
`ESBuildOptions`[esbuild 自身の変換オプション](https://esbuild.github.io/api/#transform)を拡張します。最も一般的な使用例は、JSX のカスタマイズです:
362+
`OxcOptions`[Oxc Transformer のオプション](https://oxc.rs/docs/guide/usage/transformer)を拡張します。最も一般的な使用例は、JSX のカスタマイズです:
361363

362364
```js
363365
export default defineConfig({
364-
esbuild: {
365-
jsxFactory: 'h',
366-
jsxFragment: 'Fragment',
366+
oxc: {
367+
jsx: {
368+
runtime: 'classic',
369+
pragma: 'h',
370+
pragmaFrag: 'Fragment',
371+
},
367372
},
368373
})
369374
```
370375

371-
デフォルトでは esbuild は `ts`, `jsx`, `tsx` ファイルに適用されます。`esbuild.include``esbuild.exclude` でカスタマイズでき、正規表現か [picomatch](https://github.com/micromatch/picomatch#globbing-features) パターン、もしくはそれらの配列を指定します。
376+
デフォルトでは Oxc による変換は `ts`, `jsx`, `tsx` ファイルに適用されます。`oxc.include``oxc.exclude` でカスタマイズでき、正規表現か [picomatch](https://github.com/micromatch/picomatch#globbing-features) パターン、もしくはそれらの配列を指定します。
372377

373-
また、`esbuild.jsxInject` を使用すると、esbuild で変換されたすべてのファイルに対して JSX ヘルパーの import を自動的に注入できます:
378+
また、`oxc.jsxInject` を使用すると、Oxc で変換されたすべてのファイルに対して JSX ヘルパーの import を自動的に注入できます:
374379

375380
```js
376381
export default defineConfig({
377-
esbuild: {
382+
oxc: {
378383
jsxInject: `import React from 'react'`,
379384
},
380385
})
381386
```
382387

383-
[`build.minify`](./build-options.md#build-minify)`true` のとき、全てのミニファイ最適化はデフォルトで適用されます。[特定の側面](https://esbuild.github.io/api/#minify)を無効化するためには、`esbuild.minifyIdentifiers``esbuild.minifySyntax``esbuild.minifyWhitespace` のいずれかを `false` に設定してください。`build.minify` を上書きするために `esbuild.minify` を利用できないことに注意してください。
388+
Oxc による変換を無効にするには `false` を設定します。
389+
390+
## esbuild
391+
392+
- **型:** `ESBuildOptions | false`
393+
- **非推奨**
384394

385-
esbuild の変換を無効にするには `false` を設定します
395+
このオプションは内部的に `oxc` オプションに変換されます。代わりに `oxc` オプションを使用してください
386396

387397
## assetsInclude
388398

config/worker-options.md

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,17 @@
1616
ワーカーバンドルに適用される Vite プラグイン。[config.plugins](./shared-options#plugins) は開発時のワーカーのみに適用されるため、ビルドの場合はここで設定する必要があることに注意してください。
1717
この関数は、rollup ワーカーを並行してビルドする際に使用される新しいプラグインインスタンスを返す必要があります。そのため、 `config` フックの `config.worker` オプションの変更は無視されます。
1818

19+
## worker.rolldownOptions
20+
21+
<!-- TODO: update the link below to Rolldown's documentation -->
22+
23+
- **型:** [`RolldownOptions`](https://rollupjs.org/configuration-options/)
24+
25+
ワーカーバンドルをビルドするための Rolldown オプション。
26+
1927
## worker.rollupOptions
2028

21-
- **型:** [`RollupOptions`](https://rollupjs.org/configuration-options/)
29+
- **型:** `RolldownOptions`
30+
- **非推奨**
2231

23-
ワーカーバンドルをビルドするための Rollup オプション
32+
このオプションは `worker.rolldownOptions` オプションのエイリアスです。代わりに `build.rolldownOptions` オプションを使用してください

guide/api-javascript.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -389,6 +389,21 @@ function normalizePath(id: string): string
389389

390390
Vite プラグイン間で相互運用するためにパスを正規化します。
391391

392+
## `transformWithOxc`
393+
394+
**型シグネチャー:**
395+
396+
```ts
397+
async function transformWithOxc(
398+
code: string,
399+
filename: string,
400+
options?: OxcTransformOptions,
401+
inMap?: object,
402+
): Promise<Omit<OxcTransformResult, 'errors'> & { warnings: string[] }>
403+
```
404+
405+
[Oxc Transformer](https://oxc.rs/docs/guide/usage/transformer) で JavaScript か TypeScript を変換します。Vite の内部での Oxc Transformer の変換に合わせたいプラグインにとって有用です。
406+
392407
## `transformWithEsbuild`
393408

394409
**型シグネチャー:**
@@ -402,6 +417,8 @@ async function transformWithEsbuild(
402417
): Promise<ESBuildTransformResult>
403418
```
404419

420+
**非推奨:** 代わりに `transformWithOxc` を使用してください。
421+
405422
esbuildJavaScriptTypeScript を変換します。Vite の内部での esbuild の変換に合わせたいプラグインにとって有用です。
406423

407424
## `loadConfigFromFile`

0 commit comments

Comments
 (0)