ウェブパックからあなたの反応アプリを移動するVite

Viteとは

Vite そのメンテナが主張するように、「次世代フロントエンドツーリング」です.インスタントdevのサーバーは、高速ホットモジュールのリロード、最適化生産ビルド-それはすべてです.
しかし、Viteのドキュメントは、既存のWebpackアプリを移行する方法を言いません🤷 心配しないで!このガイドでは、我々は一緒にこれを介して取得します!

あなたのレポをESモジュールに変えてください

あなたのpackage.json , 次のエントリを追加します

  "type": "module",

抱擁モダニティ!拒否伝統!だからこそ、私たちはとにかくViteに切り替えている!

VITEとプラグインのインストール

npm i --save-dev vite @vitejs/plugin-react vite-plugin-html

or

yarn add vite @vitejs/plugin-react vite-plugin-html --dev

置換するスクリプト

あなたのpackage.json , おそらく以下のようなスクリプトがあります.

  "build": "NODE_ENV=production webpack",
  "dev": "NODE_ENV=development webpack serve",

build コマンドnpm run build or yarn build , 生産のためのあなたのアプリケーションをビルドします.dev コマンドは開発サーバを起動します.
これらのスクリプトを置き換える必要があります.

  "build": "vite build",
  "dev": "vite serve",

その上に、1つの追加コマンドを追加できます.

  "preview": "vite preview"

preview コマンドは、生産用に構築されたアプリケーションを実行しているサーバーを起動します.
開発サーバーを走らせましょう!

  vite v2.9.1 dev server running at:

  > Local: http://localhost:3000/
  > Network: use --host to expose

  ready in 261ms.

👁👄👁 うわー、それは速いです.

ルートがあるViteを教えてください

現在開発サーバを起動した場合、Viteはindex.html プロジェクトのルートディレクトリにあります.それがどこか他の所であるならば、Viteはそれを見つけることができなくて、代わりに空のページを表示します.
これを修正するにはindex.html あなたのルートディレクトリにindex.html イン.私の場合ではsrc/index.html .
このようにディレクトリ名をあなたのコマンドに追加することでこれを行うことができます.

  "build": "vite build src",
  "dev": "vite serve src",

しかし、あなたはまた、vite.config.js プロジェクトのルートでファイルします.あなたはとにかくしばらくの間、それを必要とするので、なぜ1つの場所にすべての設定を維持する1つを作成しませんか?

import { defineConfig } from 'vite';

export default defineConfig({
  root: 'src',
  build: {
    // Relative to the root
    outDir: '../dist',
  },
});

プラグインの設定

今では、Vite知っている場所を見つけるindex.html ファイルを使っているなら、エラーが発生します.

私の場合はHtmlWebpackPlugin 's templateParameters オプションを動的にカスタムタイトルを注入するindex.html 以下のようにします.

  <title><%= title %></title>

new HtmlWebpackPlugin({
  template: 'index.html',
  templateParameters: {
    title: env === 'production' ? 'My site' : `My site [${env.toUpperCase()}]`,
  },
}),

ありがたいことに、我々は同じことを行うことができますvite-plugin-html . あなたのvite.config.js , 次のビットを追加します.

import { injectHtml } from 'vite-plugin-html';

export default defineConfig({
  // …
  plugins: [
    createHtmlPlugin({
      inject: {
        data: {
          title: env === 'production' ? 'My site' : `My site [${env.toUpperCase()}]`,
        },
      },
    }),
  ],
});

エントリモジュールをインデックスに追加します。HTMLファイル

この時点で、あなたのindex.html ファイルは、ちょうど罰金を出すべきです.しかし、アプリケーションはまだロードされません!
あなたがwebpackを使用するならば、あなたは多分また、使われましたhtml-webpack-plugin 注射する<script> あなたのエントリモジュールを持つタグindex.html .
VITEこれらのタグを自動的に注入されません.あなたは自分でそれらを追加する必要があります.例えば、

<script type="module" src="./index.jsx"></script>

ああ、それはよりよいです.何かが命に達した.

プラグインの反応

わかりました、あなたが見ることができるように、我々はまだ全くそこにいません.設定する必要があります@vitejs/plugin-react それを反応で動作させる.
あなたがまだ古典的なJSXランタイムを使用するならば、あなたのアプリはすでにこの点でロードされるかもしれません、しかし、あなたはとにかくこれらのステップに従うことを望みます.このプラグインは、自動JSXランタイム(手動ですべてのファイルで反応をインポートする必要はありませんが、おかげで)を処理するだけでなく、高速リフレッシュのような機能を追加し、Babelの統合を有効にし、はるかに.
あなたに加えるvite.config.js ファイル:

import react from '@vitejs/plugin-react';

export default defineConfig({
  // …
  plugins: [
    // …
    react({
      // Use React plugin in all *.jsx and *.tsx files
      include: '**/*.{jsx,tsx}',
    }),
  ],
});

バベルプラグイン

バベルはまったく必要ないかもしれない@babel/preset-env and @babel/preset-react 役に立たない.
しかし、時々Babelプラグインはまだ便利かもしれません.例えば、あるplugin to remove PropTypes バンドルサイズを少し小さくするために使用することができます.また、開発やテストを容易にするために、コンポーネントの表示名を追加することにより、開発やテストを容易にすることができます.@vitejs/plugin-react ここで救出に来るbabel オプション.例えば、babel-plugin-styled-components プラグイン

    react({
      // …
      babel: {
        plugins: ['babel-plugin-styled-components'],
      },
    },

静的ファイル処理

デフォルトではpublic ルートディレクトリに置かれたディレクトリはビルド時にコピーされます.他のファイルを持っているならばpublicDir オプション:

export default defineConfig({
  // …
  publicDir: '../public',
});

プロセス。環境変数問題

使っていたprocess.env.NODE_ENV 私のアプリの場所の束で.この結果、コンソールに以下のエラーが発生しました.

Uncaught ReferenceError: process is not defined

Viteでは、使用することができますimport.meta.env.* 代わりに.例えば、process.env.NODE_ENV に置き換えられるimport.meta.env.NODE_ENV .

楽しむ！

今すぐあなたのアプリを参照してください、VITEによって供給!
まだやっていない我々はまだ生産でそれを実行する前にいくつかのものを微調整する必要があります.このためには、このガイドの2番目の部分を待つ必要があります.通知を取得する購読!

掃除

これらの依存関係を安全に削除することができます.

webpack (duh)

webpack-cli

webpack-dev-server

*-loader (例)babel-loader , style-loader )

*-webpack-plugin (例)html-webpack-plugin , mini-css-extract-plugin

@babel/preset-env

@babel/preset-react

webpack.config.js WebPackの設定ファイルも削除できます.babel.config.js , babel.config.json , or .babelrc を削除することができます.@vitejs/plugin-react 設定.

何か行方不明？

あなたが対処する必要がある何か他の何かがあると思いますか?どうか、コメントで知らせてください!