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
16 changes: 8 additions & 8 deletions changes/per-environment-apis.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,12 @@
[Environment API feedback discussion](https://github.com/vitejs/vite/discussions/16358)でフィードバックをお寄せください。
:::

ViteDevServer のモジュールグラフに関連する複数の API は、より独立した環境 API に置き換えられました。

- `server.moduleGraph` -> [`environment.moduleGraph`](/guide/api-environment#separate-module-graphs)
- `server.transformRequest` -> `environment.transformRequest`
- `server.warmupRequest` -> `environment.warmupRequest`
モジュールグラフとモジュール変換に関連する `ViteDevServer` の複数の API が `DevEnvironment` インスタンスに移動されました。

影響範囲: `Vite プラグイン作成者`

::: warning 将来の廃止予定
Environment インスタンスは `v6.0` で初めて導入されました。`v7.0` では現在環境にある `server.moduleGraph` やその他のメソッドが廃止される予定です。まだサーバーのメソッドから移行することはお勧めしません。使用状況を明確にするために、vite の設定でこれらを設定してください。
`Environment` インスタンスは `v6.0` で初めて導入されました。`v7.0` では現在環境にある `server.moduleGraph` やその他のメソッドが廃止される予定です。まだサーバーのメソッドから移行することはお勧めしません。使用状況を明確にするために、vite の設定でこれらを設定してください。

```ts
future: {
Expand All @@ -26,8 +22,12 @@ future: {

## 動機

// TODO: <small>(訳注: 原文ママ)</small>
Vite v5 以前では、単一の Vite 開発サーバーには常に 2 つの環境(`client` と `ssr`)がありました。 `server.moduleGraph` には、これらの両方の環境からの混合モジュールが含まれていました。ノードは `clientImportedModules` と `ssrImportedModules` のリストで接続されていました(ただし、それぞれに対して単一の `importers` リストが維持されていました)。変換されたモジュールは `id` と `ssr` ブーリアンで表されていました。このブール値は、`server.moduleGraph.getModuleByUrl(url, ssr)` や `server.transformRequest(url, { ssr })` などの API に渡す必要がありました。

Vite v6 では、任意の数のカスタム環境(`client`、`ssr`、`edge` など)を作成できるようになりました。単一の `ssr` ブール値では不十分になりました。API を `server.transformRequest(url, { environment })` という形式に変更する代わりに、これらのメソッドを環境インスタンスに移動し、Vite 開発サーバーなしで呼び出せるようにしました。

## 移行ガイド

// TODO: <small>(訳注: 原文ママ)</small>
- `server.moduleGraph` -> [`environment.moduleGraph`](/guide/api-environment#separate-module-graphs)
- `server.transformRequest(url, ssr)` -> `environment.transformRequest(url)`
- `server.warmupRequest(url, ssr)` -> `environment.warmupRequest(url)`
65 changes: 62 additions & 3 deletions changes/shared-plugins-during-build.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
[Environment API feedback discussion](https://github.com/vitejs/vite/discussions/16358)でフィードバックをお寄せください。
:::

// TODO: <small>(訳注: 原文ママ)</small>
[ビルド時の共有プラグイン](/guide/api-environment.md#shared-plugins-during-build)を参照してください。

影響範囲: `Vite プラグイン作成者`
Expand All @@ -15,8 +14,68 @@

## 動機

// TODO: <small>(訳注: 原文ママ)</small>
開発とビルドのプラグインパイプラインを調整します。

## 移行ガイド

// TODO: <small>(訳注: 原文ママ)</small>
環境をまたいでプラグインを共有できるようにするには、プラグインの状態を現在の環境でキー付けする必要があります。以下の形式のプラグインは、すべての環境における変換されたモジュールの数を数えます。

```js
function CountTransformedModulesPlugin() {
let transformedModules
return {
name: 'count-transformed-modules',
buildStart() {
transformedModules = 0
},
transform(id) {
transformedModules++
},
buildEnd() {
console.log(transformedModules)
},
}
}
```

代わりに、各環境で変換されたモジュールの数を数えたい場合は、マップを保持する必要があります。

```js
function PerEnvironmentCountTransformedModulesPlugin() {
const state = new Map<Environment, { count: number }>()
return {
name: 'count-transformed-modules',
perEnvironmentStartEndDuringDev: true,
buildStart() {
state.set(this.environment, { count: 0 })
}
transform(id) {
state.get(this.environment).count++
},
buildEnd() {
console.log(this.environment.name, state.get(this.environment).count)
}
}
}
```

このパターンを簡素化するために、Vite の内部では、`usePerEnvironmentState` ヘルパーを使用しています:

```js
function PerEnvironmentCountTransformedModulesPlugin() {
const state = usePerEnvironmentState<{ count: number }>(() => ({ count: 0 }))
return {
name: 'count-transformed-modules',
perEnvironmentStartEndDuringDev: true,
buildStart() {
state(this).count = 0
}
transform(id) {
state(this).count++
},
buildEnd() {
console.log(this.environment.name, state(this).count)
}
}
}
```