レガシー反応TypeScriptプロジェクトの上でWebpackとBabelを交換する方法

JavaScriptの世界がどれくらい速く動くかは、狂気です.
ビルドツールに関してはGrunt それが最初にリリースされた時でしたGulp , and Babel に沿って新しい米国の機能を追加し、古いブラウザで動作するようになる.
そこにWebpack それはしばらくの間、あるように思えました.あとでParcel and Snowpack 人々がまだWebpackを推薦した場面に来ました.つまり、それはまだ作成反応のバックボーンのアプリです.それから、Vite がリリースされました.
Viteは速く、本当に速いです.これは非常に小さな設定を必要とセットアップに簡単です.それは上に座るesbuild .
私はVITEに代わる将来には何かがあるだろうということは間違いありませんが、VITE用の設定ファイルが10行程度になるという簡単な事実のために、WebPackが100前後であるという簡単な事実については、今後数年間、古いウェブパックプロジェクトをアップグレードするために何かを固執するのは良い選択だと思います.
あなたが依存性とセキュリティの脆弱性メッセージのトンを取り除くことができるようにプラスVabelを使用している場合は、バベルを必要としない.

メインステップ

1 -まず最初に、私たちの古いプロジェクトのための新しいブランチを作成しましょう.我々はそれを参照する必要がない場合は数ヶ月後に支店を削除することができます.

# oh-my-zsh git aliases
gcb old-webpack-babel
gpsup

注意:上記のコマンドは、oh-my-zsh . あなたはfull list はい.
2 -メインブランチに戻って、BabelパッケージとWebpackパッケージの全てを取り除きましょう.

npm uninstall webpack webpack-merge webpack-dev-server
 webpack-cli ... you get the idea

3 -すべてのウェブパックとBabel関連のファイルを削除してください.普通.ウェブパック.dev . jsなど.
4 - ViteをインストールするVite反応プラグイン

npm i vite @vitejs/plugin-react
# then
npm i @types/node -D

5 - Viteを作成します.設定.プロジェクトのルートにあるファイルを次のコードを使用します.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()]
});

6 -パッケージを更新します.JSONファイルを次のコード

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

現在実行中npm run dev , そして、すべてがうまく行くならば、あなたのプロジェクトは立派でなければなりません.

任意の手順

プロジェクトによっては、以下の手順は必要ありません.

エイリアス

私のような場合、このようなコードでいくつかのランダムなウェブパックのエイリアスがあります.

import "@/assets/styles/global";

次のようにviteファイルに追加できます:

// At top of file
import path from "node:path";

// ...
  resolve:{
      alias:{
        '@' : path.resolve(__dirname,)
      },
    },
  plugins: [react()]

CSSモジュール

あなたがCSSモジュールを使用しているならば、私はあなたを気の毒に思います.すべてのファイルの拡張子を変更する必要があります.モジュールです.ちょうどCSSの代わりに.CSS
次に、CSSファイルにある任意の作成プロパティの名前を変更します.

/* from this */
composes: c-white from "../helpers.css";
/* to this */
composes: c-white from "../helpers.module.css";

そして、あなたがCSSファイルをインポートしているどんなJS/TSファイルも.

// from this
import buttonCss from '@assets/styles/Buttons.css';
// to this
import buttonCss from '@assets/styles/Buttons.module.css';

これは本当に辛いですが、もっと意味があります.また、検索と置換すべてのあなたの友人です💪

VITE環境変数

環境変数を設定して秘密を保つか、または情報のビットを挿入する
1を作成する.env ファイル.
2 -このような変数の前にVACHEUNTを指定します.

VITE_TEST_VAR = "something secret"

3 -このようにコードにロードします.

const secretVar = import.meta.env.VITE_TEST_VAR;

4 -あなたがtypescriptを使用しているならば、あなたはenv.d.ts プロジェクトのルートファイル

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // more env variables...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

NPMチェックアップデートのインストール

レガシープロジェクトの一部をアップグレードしているので、他のすべての依存関係を更新しない理由.最善の方法はnpm-check-updates パッケージ.
アップデートをインストールすることを勧めますsemver レベル、ので、最初の更新プログラムは、マイナーな更新、その後メジャー.プロジェクトのテストはまだ更新の間で動作します
これは次のようなコマンドを実行することで簡単に行えます.

ncu -t patch -u

パッケージのパッチバージョンを更新するには.次にJSONファイルを実行する

npm i

更新を実際にインストールするには.
そして、それはかなりそれです.
私はVITEの専門家ではありません、しかし、あなたが質問をするならば、下記のセクションで彼らを書き留めること自由に感じてください、そして、私は彼らに答えるために最善を尽くします.