Vite

日本語

English
简体中文
Español
Português
한국어
Deutsch

日本語

English
简体中文
Español
Português
한국어
Deutsch

Appearance

ViteConf Logo

Building Together

ViteConf 2024

リプレイを視聴する！

v5 からの移行 ​

Environment API ​

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

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

Vite ランタイム API ​

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

全般的な変更 ​

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 stringify ​

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 では、サポートされている HTML 要素のうち、Vite によって処理およびバンドルされるアセットを参照できるものは、<link href>、<img src> など、ごく一部に限られていました。

Vite 6 では、さらに多くの HTML 要素がサポート対象に追加されています。 完全なリストは、HTML 機能のドキュメントでご覧いただけます。

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

postcss-load-config ​

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

Sass はデフォルトでモダン API を使用するようになりました ​

Vite 5 では、Sass にはデフォルトでレガシーAPI が使用されていました。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
json
{
  "name": "my-lib",
  "exports": {
    "./style.css": "./dist/style.css"
    "./style.css": "./dist/my-lib.css"
  }
}

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

高度な内容 ​

少数のユーザーにのみ影響するその他の重大な変更があります。

v4 からの移行 ​

まず、Vite v5 ドキュメントのv4 からの移行ガイドをチェックし、アプリを Vite 5 に移植するために必要な変更を確認してから、このページの変更を進めてください。

Released under the MIT License. (db0d9897)

Copyright © 2019-present VoidZero Inc. & Vite Contributors