v5からの移行

環境API

新しい実験的な環境APIの一部として、大規模な内部リファクタリングが必要でした。Vite 6では、ほとんどのプロジェクトが迅速に新しいメジャーバージョンにアップグレードできるように、破壊的変更を避けるよう努めています。エコシステムの大部分が移行するまで待ってから、新しいAPIの使用を推奨します。いくつかの例外ケースがあるかもしれませんが、これはフレームワークやツールによる低レベルの使用にのみ影響するはずです。リリース前に、エコシステムのメンテナと協力して、これらの違いを軽減しました。回帰を発見した場合は、問題を報告してください。

Viteの実装の変更により、いくつかの内部APIが削除されました。それらのAPIに依存していた場合は、機能リクエストを作成してください。

ViteランタイムAPI

実験的なViteランタイムAPIは、新しい実験的な環境APIの一部としてVite 6でリリースされたモジュールランナーAPIに進化しました。この機能は実験的だったため、Vite 5.1で導入された以前のAPIの削除は破壊的変更ではありませんが、ユーザーはVite 6への移行の一環として、その使用をモジュールランナーの同等のものに変更する必要があります。

一般的な変更点

resolve.conditionsのデフォルト値

この変更は、resolve.conditions / ssr.resolve.conditions / ssr.resolve.externalConditionsを設定していないユーザーには影響しません。

Vite 5では、resolve.conditionsのデフォルト値は[]であり、いくつかの条件が内部的に追加されていました。ssr.resolve.conditionsのデフォルト値はresolve.conditionsの値でした。

Vite 6からは、一部の条件が内部的に追加されなくなり、設定値に含める必要があります。内部的に追加されなくなった条件は、

• resolve.conditionsは['module', 'browser', 'development|production']
• ssr.resolve.conditionsは['module', 'node', 'development|production']

これらのオプションのデフォルト値は対応する値に更新され、ssr.resolve.conditionsはresolve.conditionsをデフォルト値として使用しなくなりました。development|productionは、process.env.NODE_ENVの値に応じてproductionまたはdevelopmentに置き換えられる特別な変数であることに注意してください。これらのデフォルト値は、viteからdefaultClientConditionsとdefaultServerConditionsとしてエクスポートされます。

resolve.conditionsまたはssr.resolve.conditionsにカスタム値を指定した場合は、新しい条件を含めるように更新する必要があります。たとえば、以前resolve.conditionsに['custom']を指定していた場合は、代わりに['custom', ...defaultClientConditions]を指定する必要があります。

JSON文字列化

Vite 5では、json.stringify: trueが設定されている場合、json.namedExportsは無効化されていました。

Vite 6からは、json.stringify: trueが設定されていても、json.namedExportsは無効化されず、その値が尊重されます。以前の動作を実現するには、json.namedExports: falseを設定できます。

Vite 6では、json.stringifyの新しいデフォルト値として'auto'が導入されました。これは、大きなJSONファイルのみを文字列化します。この動作を無効にするには、json.stringify: falseを設定します。

HTML要素におけるアセット参照の拡張サポート

Vite 5では、<link href>、<img src>など、Viteによって処理およびバンドルされるアセットを参照できるサポートされているHTML要素はごくわずかでした。

Vite 6では、さらに多くのHTML要素へのサポートが拡張されました。完全なリストは、HTML機能のドキュメントを参照してください。

特定の要素でのHTML処理をオプトアウトするには、その要素にvite-ignore属性を追加できます。

postcss-load-config

postcss-load-configがv4からv6に更新されました。tsxまたはjitiが、ts-nodeの代わりにTypeScriptのpostcss設定ファイルを読み込むために必要になりました。また、yamlがYAMLのpostcss設定ファイルを読み込むために必要になりました。

Sassはデフォルトで最新のAPIを使用するようになりました

Vite 5では、レガシーAPIがSassのデフォルトで使用されていました。Vite 5.4で最新のAPIのサポートが追加されました。

Vite 6からは、最新のAPIがSassのデフォルトで使用されます。レガシーAPIを引き続き使用したい場合は、css.preprocessorOptions.sass.api: 'legacy' / css.preprocessorOptions.scss.api: 'legacy'を設定できます。ただし、レガシーAPIのサポートはVite 7で削除されることに注意してください。

最新のAPIに移行するには、Sassのドキュメントを参照してください。

ライブラリモードでのCSS出力ファイル名のカスタマイズ

Vite 5では、ライブラリモードでのCSS出力ファイル名は常にstyle.cssであり、Viteの設定から簡単に変更することはできませんでした。

Vite 6からは、デフォルトのファイル名にJS出力ファイルと同様にpackage.jsonの"name"が使用されるようになりました。build.lib.fileNameが文字列で設定されている場合、その値はCSS出力ファイル名にも使用されます。異なるCSSファイル名を明示的に設定するには、新しいbuild.lib.cssFileNameを使用して設定できます。

移行するには、style.cssファイル名に依存していた場合は、パッケージ名に基づいて新しい名前に参照を更新する必要があります。例：

package.json

{
  "name": "my-lib",
  "exports": {
    "./style.css": "./dist/style.css"
    "./style.css": "./dist/my-lib.css"
  }
}

Vite 5のようにstyle.cssを使用したい場合は、代わりにbuild.lib.cssFileName: 'style'を設定できます。

高度な設定

少数のユーザーのみに影響する他の破壊的変更もあります。

• [#17922] fix(css)!: SSR devでのデフォルトインポートを削除

  • CSSファイルのデフォルトインポートのサポートは、Vite 4で非推奨になり、Vite 5で削除されましたが、SSR devモードでは意図せずにサポートされていました。このサポートは削除されました。

• [#15637] fix!: SSR用のデフォルトbuild.cssMinifyを'esbuild'に変更

  • build.cssMinifyは、SSRビルドでもデフォルトで有効になりました。

• [#18070] feat!: WebSocketを使用したプロキシバイパス

  • server.proxy[path].bypassは、WebSocketアップグレードリクエストに対して呼び出されるようになりました。その場合、resパラメーターはundefinedになります。

• [#18209] refactor!: 最小限のterserバージョンを5.16.0に更新

  • build.minify: 'terser'の最小限サポートされるterserバージョンが5.4.0から5.16.0に更新されました。

• [#18231] chore(deps): 依存関係@rollup/plugin-commonjsをv28に更新

  • commonjsOptions.strictRequiresは、デフォルトでtrueになりました（以前は'auto'でした）。
    • これによりバンドルサイズが大きくなる可能性がありますが、より決定論的なビルドになります。
    • CommonJSファイルをエントリポイントとして指定する場合、追加の手順が必要になる場合があります。commonjsプラグインのドキュメントで詳細を確認してください。

• [#18243] chore(deps)!: fast-globをtinyglobbyに移行

  • 範囲ブレース（{01..03} ⇒ ['01', '02', '03']）と増分ブレース（{2..8..2} ⇒ ['2', '4', '6', '8']）は、globではもはやサポートされていません。

• [#18395] feat(resolve)!: 条件の削除を許可

  • このPRは上記で「resolve.conditionsのデフォルト値」として言及されている破壊的変更を導入するだけでなく、SSRにおける外部化されていない依存関係に対してresolve.mainFieldsを使用しないようにします。SSRで外部化されていない依存関係にresolve.mainFieldsを適用したい場合は、ssr.resolve.mainFieldsを使用できます。

• [#18493] refactor!: fs.cachedChecksオプションを削除

  • このオプトイン最適化は、キャッシュされたフォルダにファイルを作成し、それをすぐにインポートする場合のエッジケースが原因で削除されました。

• [#18697] fix(deps)!: 依存関係dotenv-expandをv12に更新

  • 補間で使用される変数は、現在、補間よりも前に宣言する必要があります。詳細については、dotenv-expandの変更ログを参照してください。

• [#16471] feat: v6 - 環境API

  • SSR専用のモジュールへの更新は、クライアント側で完全なページのリロードをトリガーしなくなりました。以前の動作に戻すには、カスタムViteプラグインを使用できます。

    例を展開するにはクリックしてください

    import type { Plugin, EnvironmentModuleNode } from 'vite'
    
    function hmrReload(): Plugin {
      return {
        name: 'hmr-reload',
        enforce: 'post',
        hotUpdate: {
          order: 'post',
          handler({ modules, server, timestamp }) {
            if (this.environment.name !== 'ssr') return
    
            let hasSsrOnlyModules = false
    
            const invalidatedModules = new Set<EnvironmentModuleNode>()
            for (const mod of modules) {
              if (mod.id == null) continue
              const clientModule =
                server.environments.client.moduleGraph.getModuleById(mod.id)
              if (clientModule != null) continue
    
              this.environment.moduleGraph.invalidateModule(
                mod,
                invalidatedModules,
                timestamp,
                true,
              )
              hasSsrOnlyModules = true
            }
    
            if (hasSsrOnlyModules) {
              server.ws.send({ type: 'full-reload' })
              return []
            }
          },
        },
      }
    }

v4からの移行

アプリをVite 5に移行するために必要な変更を確認するには、まずVite v5ドキュメントのv4からの移行ガイドを参照し、その後、このページの変更に進みます。