既存のWebアプリにViteを追加します

「Veet」と発音されるViteは、その速度と使いやすさで有名な現代のJavaScriptバンドラーです。最小限の構成を必要とする強力なツールですが、広範なカスタマイズオプションを提供します。この記事では、既存のプロジェクトを別のバンドラー（Webpackなど）からViteに移行していることを詳しく説明しています。新しいプロジェクトについては、公式のVite文書を参照してください。レガシーの移行であっても、その構造をよりよく理解するために、単純なViteプロジェクトの足場を最初に推奨します。

WebpackからViteへの移行

このガイドは、かなりの長年のWebpackプロジェクトを移行する経験を反映しています。このプロセスは、移行中のViteの構成機能を強調しています。

Viteの不要なWebパック構成

Viteは本質的に多くのタスクを処理し、通常、広範なWebpack構成を必要とします。これにより、多くの一般的なWebpackプラグインと設定が必要になります。

静的資産処理

Webpackは、静的資産（画像、フォントなど）をロードするために明示的な構成を必要とすることがよくあります。

 {
  テスト：/\ .(png|jpg|gif| svg| eot|woff2|ttf )$/
  使用： [
    {
      ローダー：「ファイルローダー」
    }
  ]
}

Viteはこれを自動的に管理します。

スタイリング（CSS/SCSS）

Webpackのスタイリング構成は複雑になる可能性があります。

 {
  テスト：/\.s?css$/、
  使用：[minicssextractplugin.loader、 "css-roader"、 "sass-roader"]]
}、

// 後で

new MinicsSextractPlugin（{filename： "[name]  -  [contenthash] .css"}）、

ViteはCSSとSCSをネイティブにサポートします。 SASSをインストールするだけで、Viteは残りを処理します。

輸送（TypeScript/JSX）

webpackがTypeScriptとJSXのトランスピレーションが必要です。

 {
  テスト：/\ .(t|j）sx？$/、
  除外： /node_modules /、
  ローダー：「バベルローダー」
}、

...対応するバベル構成を備えています。 Viteは、このすぐに使えるボックスを処理し、最新のJavaScript機能とTypeScriptをサポートしています。プラグインは、古いブラウザのサポートに利用できます。

ノードモジュール解像度

webpackには、 node_modulesを解決するための明示的な構成が必要です。

解決する： {
  モジュール：[path.resolve（ "./ node_modules"）]]
}

Viteはこれを自動的に処理します。

生産/開発モード

Webpackは多くの場合、 modeを使用して環境を区別します。

モード：isprod？ 「生産」：「開発」、

Viteは個別のコマンド（開発用のvite 、 vite build for Production）を使用します。

ファイル拡張子

Webpackでは、ファイル拡張機能を指定する必要があることがよくあります。

解決する： {
  拡張機能：[".ts"、 ".tsx"、 ".js"]、
}

Viteは一般的な拡張機能を自動的に処理します。

ロールアッププラグインの互換性

多くのロールアッププラグインはViteと互換性があり、既存のプラグインのスムーズな遷移を提供します。互換性情報については、Viteドキュメントを参照してください。

最初のViteプロジェクトを設定します

既存のプロジェクトを移行するには、JavaScriptエントリファイルを参照するHTMLエントリポイント（ index.htmlなど）から始めます。必要なプラグインをインストールします（例： @vitejs/plugin-react for React Projects）。 vite.config.tsファイルを作成します：

 {vite "から{defineconfig}をインポートします。
「@vitejs/プラグインの反応」からのImport React;

デフォルトのデフォルトdefineconfigをエクスポートする（{
  プラグイン：[React（）]
}）;

NPMスクリプトを追加：

 「dev」：「vite」、
「ビルド」：「Vite Build」、
「プレビュー」：「Vite Preview」、

npm run devで開発サーバーを開始します。

高度な構成：エイリアス、環境変数、プロキシ

エイリアス

WebPackエイリアスは、 resolve.aliasを使用してViteで複製できます。

解決する： {
  エイリアス：{
    jscolor：path.resolve（ "./ util/jscolor.js"）、
    アプリ：path.resolve（ "./ app"）、
    // ...その他のエイリアス
  }
}、

環境変数

Viteは、環境変数にimport.meta.env使用します。通常、 VITE_が付いています。レガシープロジェクトの場合、既存のprocess.env変数を処理するためにカスタムプラグインが必要になる場合があります。

サーバーのプロキシ

開発中にサービスをバックエンドするリクエストをプロキシするため：

サーバー：{
  プロキシ： {
    "/graphql"： "http：// localhost：3001"
  }
}

建物ライブラリ

ライブラリを構築するには、 vite.config.tsでbuildオプションを構成します：（簡潔にするために省略された例ですが、元の例と同様）

結論

Viteは、Webアプリケーション開発の大幅な改善を提供し、速度と使いやすさを提供します。ロールアッププラグインとの機能と互換性により、既存のプロジェクトを比較的簡単に移行します。

以上が既存のWebアプリにViteを追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。