docs: add NonInheritBadge to options that are not inherited to other environments (#2084)

Author: jay-es

.vitepress/theme/components/NonInheritBadge.vue

@@ -0,0 +1,8 @@
+<template>
+  <a
+    href="/guide/api-environment#environments-configuration"
+    class="ignore-header"
+  >
+    <Badge type="info" text="non-inherit" />
+  </a>
+</template>

.vitepress/theme/index.ts

@@ -9,6 +9,7 @@ import AsideSponsors from './components/AsideSponsors.vue'
 import SvgImage from './components/SvgImage.vue'
 import YouTubeVideo from './components/YouTubeVideo.vue'
 import SponsorBanner from './components/SponsorBanner.vue'
+import NonInheritBadge from './components/NonInheritBadge.vue'
 import 'virtual:group-icons.css'
 
 export default {
@@ -22,6 +23,7 @@ export default {
   enhanceApp({ app }) {
     app.component('SvgImage', SvgImage)
     app.component('YouTubeVideo', YouTubeVideo)
+    app.component('NonInheritBadge', NonInheritBadge)
     app.use(TwoslashFloatingVue)
   },
 } satisfies Theme

config/dep-optimization-options.md

@@ -4,15 +4,15 @@
 
 特に記載がない限り、このセクションのオプションは、開発時にだけ使用される依存関係の最適化にのみ適用されます。
 
-## optimizeDeps.entries
+## optimizeDeps.entries <NonInheritBadge />
 
 - **型:** `string | string[]`
 
 デフォルトでは、Vite はすべての `.html` ファイルをクロールして、事前にバンドルする必要のある依存関係を検出します（`node_modules`, `build.outDir`, `__tests__` および `coverage` は無視します）。`build.rollupOptions.input` が指定されている場合、Vite は代わりにそれらのエントリーポイントをクロールします。
 
 これらのいずれもニーズに合わない場合、このオプションを使ってカスタムエントリーを指定することができます。値は Vite プロジェクトルートからの相対的な [`tinyglobby` パターン](https://github.com/SuperchupuDev/tinyglobby) か、パターンの配列でなければいけません。これによりデフォルトのエントリーの推論が上書きされます。`optimizeDeps.entries` が明示的に定義されている場合、デフォルトでは `node_modules` と `build.outDir` フォルダーのみが無視されます。他のフォルダーを無視したい場合は、最初の `!` でマークした無視パターンをエントリーリストの一部として使用できます。`node_modules` を明示的に含むパターンに対しては、`node_modules` は無視されません。
 
-## optimizeDeps.exclude
+## optimizeDeps.exclude <NonInheritBadge />
 
 - **型:** `string[]`
 
@@ -33,7 +33,7 @@ export default defineConfig({
 
 :::
 
-## optimizeDeps.include
+## optimizeDeps.include <NonInheritBadge />
 
 - **型:** `string[]`
 
@@ -51,7 +51,7 @@ export default defineConfig({
 });
 ```
 
-## optimizeDeps.esbuildOptions
+## 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)`,
 | 'bundle'
@@ -72,28 +72,28 @@ export default defineConfig({
 - `external` も省略されています。Vite の `optimizeDeps.exclude` オプションを使用してください
 - `plugins` は Vite の依存関係プラグインとマージされます
 
-## optimizeDeps.force
+## optimizeDeps.force <NonInheritBadge />
 
 - **型:** `boolean`
 
 `true` に設定すると、前にキャッシュされた最適化された依存関係を無視して、依存関係の事前バンドルをするよう強制します。
 
-## optimizeDeps.noDiscovery
+## optimizeDeps.noDiscovery <NonInheritBadge />
 
 - **型:** `boolean`
 - **デフォルト:** `false`
 
 `true` に設定すると、自動的な依存関係の発見が無効化され、`optimizeDeps.include` に指定された依存関係だけが最適化されます。CJS のみの依存関係は、開発中に `optimizeDeps.include` に存在している必要があります。
 
-## optimizeDeps.holdUntilCrawlEnd
+## optimizeDeps.holdUntilCrawlEnd <NonInheritBadge />
 
 - **実験的機能:** [フィードバックをしてください](https://github.com/vitejs/vite/discussions/15834)
 - **型:** `boolean`
 - **デフォルト:** `true`
 
 有効化すると、コールドスタート時にすべての静的インポートがクロールされるまで、最初に最適化された依存関係の結果を保持します。これにより、新しい依存関係が発見されて、それが新しい共通チャンクの生成をトリガーしたときに、ページ全体をリロードする必要がなくなります。もしすべての依存関係が `include` で明示的に定義されていて、それらがすべてスキャナーで検出された場合は、このオプションを無効化して、ブラウザープロセスがより多くのリクエストを並列に処理できるようにすることをおすすめします。
 
-## optimizeDeps.disabled
+## optimizeDeps.disabled <NonInheritBadge />
 
 - **非推奨**
 - **実験的機能:** [フィードバックをしてください](https://github.com/vitejs/vite/discussions/13839)
@@ -108,7 +108,7 @@ export default defineConfig({
 ビルド時の依存関係の最適化は**実験的な**機能でした。この戦略を試したプロジェクトでは、`build.commonjsOptions: { include: [] }` を使用して `@rollup/plugin-commonjs` も削除しました。もし削除していた場合、バンドル中に CJS のみのパッケージをサポートするために、再び有効にするよう警告が表示されます。
 :::
 
-## optimizeDeps.needsInterop
+## optimizeDeps.needsInterop <NonInheritBadge />
 
 - **実験的機能**
 - **型:** `string[]`

config/shared-options.md

@@ -114,7 +114,7 @@ declare const __APP_VERSION__: string
 SSR ビルドの場合、`build.rollupOptions.output` で設定された ESM ビルド出力に対して重複排除が機能しません。これを回避するには、ESM のモジュール読み込みのためのプラグインのサポートが改善されるまで、CJS ビルド出力を使用する必要があります。
 :::
 
-## resolve.conditions
+## resolve.conditions <NonInheritBadge />
 
 - **型:** `string[]`
 - **デフォルト:** `['module', 'browser', 'development|production']` (`defaultClientConditions`)
@@ -140,7 +140,7 @@ SSR ビルドの場合、`build.rollupOptions.output` で設定された ESM ビ
 
 要件が満たされている場合は、`import`、`require`、`default` の条件が常に適用されることに注意してください。
 
-## resolve.mainFields
+## resolve.mainFields <NonInheritBadge />
 
 - **型:** `string[]`
 - **デフォルト:** `['browser', 'module', 'jsnext:main', 'jsnext']` (`defaultClientMainFields`)

guide/api-environment.md

@@ -70,7 +70,7 @@ export default {
 }
 ```
 
-明示的にドキュメント化されていない場合、環境は設定されたトップレベルのコンフィグオプションを継承します（例えば、新しい `server` および `edge` 環境は `build.sourcemap: false` オプションを継承します）。`optimizeDeps` などの少数のトップレベルオプションは、サーバー環境にデフォルトで適用するとうまく動作しないため、`client` 環境のみに適用されます。 `client` 環境は `environments.client` を通して明示的に設定することもできますが、新しい環境を追加した際にクライアントの設定が変更されないように、トップレベルオプションを使用することをお勧めします。
+明示的にドキュメント化されていない場合、環境は設定されたトップレベルのコンフィグオプションを継承します（例えば、新しい `server` および `edge` 環境は `build.sourcemap: false` オプションを継承します）。`optimizeDeps` などの少数のトップレベルオプションは、サーバー環境にデフォルトで適用するとうまく動作しないため、`client` 環境のみに適用されます。これらのオプションには、[リファレンス](/config/) で <NonInheritBadge /> バッジが付いています。`client` 環境は `environments.client` を通して明示的に設定することもできますが、新しい環境を追加した際にクライアントの設定が変更されないように、トップレベルオプションを使用することをお勧めします。
 
 `EnvironmentOptions` インターフェースは環境ごとのオプションをすべて公開します。`resolve` のように、`build` と `dev` の両方に適用される環境オプションもあります。また、`dev` と `build` に固有のオプション（`dev.warmup` や `build.outDir` など）には、`DevEnvironmentOptions` と `BuildEnvironmentOptions` があります。`optimizeDeps` のように、`dev` にのみ適用されるオプションもありますが、後方互換性を保つため、`dev` のネストではなくトップレベルとして維持されています。