Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions .vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -308,10 +308,6 @@ export default defineConfig({
text: 'パフォーマンス',
link: '/guide/performance',
},
{
text: 'Rolldown',
link: '/guide/rolldown',
},
{
text: `v${viteMajorVersion - 1} からの移行`,
link: '/guide/migration',
Expand Down
46 changes: 31 additions & 15 deletions config/build-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@

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

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

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

## build.modulePreload

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

## build.cssMinify

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

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

`'esbuild'` に設定する場合は esbuild のインストールが必要です。

```sh
npm add -D esbuild
```

## build.sourcemap

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

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

## build.rollupOptions
## build.rolldownOptions

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

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

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

- **型:** [`RollupCommonJSOptions`](https://github.com/rollup/plugins/tree/master/packages/commonjs#options)
## build.rollupOptions

- **型:** `RolldownOptions`
- **非推奨**

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

## build.dynamicImportVarsOptions

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

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

<!-- 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 -->

## build.lib

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

## build.minify

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

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

`build.minify: 'esbuild'` は非推奨であり、将来削除される予定です。

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

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

```sh
npm add -D esbuild
npm add -D terser
```

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

## build.watch

<!-- TODO: update the link below to Rolldown's documentation -->

- **型:** [`WatcherOptions`](https://rollupjs.org/configuration-options/#watch)`| null`
- **デフォルト:** `null`

Expand Down
25 changes: 19 additions & 6 deletions config/dep-optimization-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,23 @@ export default defineConfig({
});
```

## optimizeDeps.rolldownOptions <NonInheritBadge />

- **型:** [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)`<``RolldownOptions`, `'input' | 'logLevel' | 'output'> & {
output?: [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)`<`
`RolldownOutputOptions`,
`'format' | 'sourcemap' | 'dir' | 'banner'>`
`}`

<!-- TODO: add link to RolldownOptions -->
<!-- TODO: add link to RolldownOutputOptions -->

依存関係のスキャンと最適化の際、Rolldown に渡すオプション。

いくつかのオプションは、変更すると Vite の依存関係の最適化と互換性がなくなるため、省略されています。

- `plugins` は Vite の依存関係プラグインとマージされます

## optimizeDeps.esbuildOptions <NonInheritBadge />
<!-- textlint-disable -->
- **型:** [`Omit`](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)`<`[`EsbuildBuildOptions`](https://esbuild.github.io/api/#general-options)`,
Expand All @@ -64,13 +81,9 @@ export default defineConfig({
| 'outbase'
| 'outExtension'
| 'metafile'>`
- **非推奨**
<!-- textlint-enable -->
依存関係のスキャンと最適化の際、 esbuild に渡すオプション。

いくつかのオプションは、変更すると Vite の依存関係の最適化と互換性がなくなるため、省略されています。

- `external` も省略されています。Vite の `optimizeDeps.exclude` オプションを使用してください
- `plugins` は Vite の依存関係プラグインとマージされます
このオプションは内部的に `optimizeDeps.rolldownOptions` に変換されます。代わりに `optimizeDeps.rolldownOptions` を使用してください。

## optimizeDeps.force <NonInheritBadge />

Expand Down
2 changes: 1 addition & 1 deletion config/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ vite --config my-config.js
```

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

あるいは、TypeScript をサポートする環境(例:`node --experimental-strip-types`)を使用している場合、またはプレーンな JavaScript のみを記述している場合は、`--configLoader native` を指定して、環境のネイティブランタイムを使用して設定ファイルを読み込むことができます。設定ファイルによってインポートされたモジュールの更新は検出されないため、Vite サーバーは自動的に再起動されないことに注意してください。
:::
Expand Down
34 changes: 22 additions & 12 deletions config/shared-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ config でこれを指定すると、**serve と build 両方**のデフォル

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

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

**例:**

Expand Down Expand Up @@ -96,6 +96,8 @@ declare const __APP_VERSION__: string

[エントリーオプション](https://github.com/rollup/plugins/tree/master/packages/alias#entries)として `@rollup/plugin-alias` に渡されます。`{ find, replacement, customResolver }` の配列か、オブジェクトを指定します。

<!-- 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 -->

ファイルシステムのパスにエイリアスを設定する場合は、必ず絶対パスを使用してください。相対的なエイリアス値はそのまま使用され、ファイルシステムのパスには解決されません。

より高度なカスタム解決は[プラグイン](/guide/api-plugin)によって実現できます。
Expand Down Expand Up @@ -353,36 +355,44 @@ Lightning CSS の設定。すべての変換オプションは [Lightning CSS

`'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) 場合にのみデータが文字列化されます。

## esbuild
## oxc

- **型:** `ESBuildOptions | false`
- **型:** `OxcOptions | false`

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

```js
export default defineConfig({
esbuild: {
jsxFactory: 'h',
jsxFragment: 'Fragment',
oxc: {
jsx: {
runtime: 'classic',
pragma: 'h',
pragmaFrag: 'Fragment',
},
},
})
```

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

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

```js
export default defineConfig({
esbuild: {
oxc: {
jsxInject: `import React from 'react'`,
},
})
```

[`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` を利用できないことに注意してください。
Oxc による変換を無効にするには `false` を設定します。

## esbuild

- **型:** `ESBuildOptions | false`
- **非推奨**

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

## assetsInclude

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

## worker.rolldownOptions

<!-- TODO: update the link below to Rolldown's documentation -->

- **型:** [`RolldownOptions`](https://rollupjs.org/configuration-options/)

ワーカーバンドルをビルドするための Rolldown オプション。

## worker.rollupOptions

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

ワーカーバンドルをビルドするための Rollup オプション
このオプションは `worker.rolldownOptions` オプションのエイリアスです。代わりに `build.rolldownOptions` オプションを使用してください
17 changes: 17 additions & 0 deletions guide/api-javascript.md
Original file line number Diff line number Diff line change
Expand Up @@ -389,6 +389,21 @@ function normalizePath(id: string): string

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

## `transformWithOxc`

**型シグネチャー:**

```ts
async function transformWithOxc(
code: string,
filename: string,
options?: OxcTransformOptions,
inMap?: object,
): Promise<Omit<OxcTransformResult, 'errors'> & { warnings: string[] }>
```

[Oxc Transformer](https://oxc.rs/docs/guide/usage/transformer) で JavaScript か TypeScript を変換します。Vite の内部での Oxc Transformer の変換に合わせたいプラグインにとって有用です。

## `transformWithEsbuild`

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

**非推奨:** 代わりに `transformWithOxc` を使用してください。

esbuild で JavaScript か TypeScript を変換します。Vite の内部での esbuild の変換に合わせたいプラグインにとって有用です。

## `loadConfigFromFile`
Expand Down
Loading