antd+reactプロジェクトをviteに移行するためのソリューションの詳細な説明

Antd+react+webpackは、多くの場合、Reactテクノロジースタックに基づくフロントエンドプロジェクトの標準的な組み合わせです。3つとも成熟したエコシステムと安定したパフォーマンスを備えています。ただし、フロントエンドテクノロジーの継続的な革新と、いわゆる次世代ビルドプラットフォームであるvite2のリリースにより、webpackはあまり人気がないようです。なぜそう言うのでしょうか？それは、viteが速すぎるからです。しばらく実験した後、プロジェクトで webpack を vite に置き換えることにしたので、この記事を書いて皆さんと共有することにしました。

Viteとは

この記事の主人公として、まずはビルドツール Vite について簡単に紹介したいと思います。このツールは、You Yuxi がリリースした [次世代フロントエンド開発およびビルドツール] です。Vite は実は新しいツールではありません。1 年以上前にはすでに多くのバージョンがリリースされています。バージョン 2.x がリリースされるまで、フロントエンド界に大きな衝撃を与え、Vite の成熟度とパワーを証明しました。ここでは Vite を詳しく紹介するつもりはありません。詳細については、公式サイト https://cn.vitejs.dev/ を参照してください。

移行プロセス

vite ツールを理解したら、移行の準備を始めることができます。

1. viteの依存関係をインストールする

npm i vite antd-vite-import-plugin @vitejs/plugin-react-refresh vite-plugin-html -D

2. プロジェクトの元の依存関係を更新する

ここで、私たちのプロジェクトは、基本的な開発フレームワークとして dva+antd3.x を使用します。ここでは、システムの主な依存関係を最新バージョンにアップグレードしました。たとえば、dva バージョン 2.6.0-beta.22 を使用します。 react、react-dom、react-router-dom、@babel/plugin-transform-runtime などの他の関連する依存関係が更新されました (antd はまだバージョン 3.x であり、4.x バージョンにまだ更新されていません)。これは実際のニーズによって異なります。

3. vite.config.js構成ファイルをプロジェクトのルートディレクトリに追加します。

webpack の設定ファイルと比較すると、vite ははるかにシンプルで、静的リソースの処理など多くの機能が組み込まれており、関数のアクティブ化も次のように比較的簡単です。

'vite' から {defineConfig} をインポートします。
'vite-plugin-html' から vitePluginHtml をインポートします。
'@vitejs/plugin-react-refresh' から reactRefresh をインポートします。

デフォルトのdefineConfigをエクスポートする({
    css: {
        プリプロセッサオプション: {
            少ない： {
                javascriptが有効: true、
            },
        }
    },
    パブリックディレクトリ: './src/configs',
    プラグイン: [
        反応リフレッシュ()、
        antdViteImportPlugin()、
        vitePluginHtml({
            縮小: true、
            注入: {
                挿入データ: {
                    タイトル: 'vite-react-example',
                    injectScript: '<script src="/configs.js"></script>', // ルートディレクトリとしてpublicDir},
                挿入オプション: {
                    ファイル名: './index.html', // テンプレートページ}
            },
        }）、
    ]、
    サーバー: {
        オープン: 真、
        ポート: 10010、
    }
});

ここでは、html-webpack-plugin の代わりに vite-plugin-html プラグインを使用します。injectData および injectOptions オプションに注意してください。injectData を使用すると、テンプレートページにカスタムデータを簡単に挿入でき、injectOptions を使用すると、テンプレートページを指定できます。その他の設定項目については、https://www.npmjs.com/package/vite-plugin-html を参照してください。 index.html ページをそれに応じて変更する必要があります。

<!DOCTYPE html>
<ヘッド>
    <メタ文字セット="utf-8">
    <タイトル><%- タイトル %></タイトル>
    ......
</head>
<本文>
    <div id="アプリ"></div>
    <スクリプト>
        var global = globalThis || window; // 起動エラーを防ぐ</script>
    <%- スクリプトを挿入 %>
    <script type="module" src="/src/index.jsx"></script>
</本文>
</html>

webpack との違いは、ここではエントリファイルを手動で指定する必要があり、スクリプトタグタイプがモジュールであることです。

4. ファイルの拡張子を変更する

ここで紹介するファイルは、js をサフィックスとする react コンポーネントです。webpack 構築プラットフォームでは、js(x) や ts(x) で問題ありませんが、vite を使用する場合は、ts、jsx、tsx のサフィックスを持つファイルを使用することをお勧めします。この問題については、こちらの問題を参照してください: https://github.com/vitejs/vite/issues/1552。最後に、サフィックスを一括で変更するのは非常に難しいと作者が不満を述べています。忘れて、変更してください。手動で変更するのが面倒であれば、スクリプトを書くのは難しくありません。

5. 起動スクリプトを追加する

「スクリプト」: {
 "dev": "vite",
 "ビルド": "vite ビルド",
 ......
}

これで終わりのはずですが、物事は順調に進んでいません。プロジェクトは実行すらできません。まあ、順調に進むものはありません。次に、遭遇した問題を見てみましょう。

発生した問題

1. デコレータはサポートされていません

ビジネスコードでは、次のように dva によって提供される接続を使用してステータスをバインドします。

@connect(状態 => state.foo)
クラス Foo は React.PureComponent を拡張します {
 ....
}

ただし、デコレータ構文は Vite ではサポートされていません。この問題については、https://github.com/vitejs/vite/issues/2349 に問題があります。現時点では適切な解決策がないため、デコレータを削除し、代わりに通常の関数バインディングを使用する必要があります。

2.antd 不明なテーマタイプ: 未定義、名前: 未定義

私たちのプロジェクトは現在、antd のバージョン 3.x を使用しています。このエラーは起動時に発生しました。実際、これは主に、antd コンポーネントが初期化されるときに antd/es/icon/index.js ファイルが読み込まれることが原因です。

'@ant-design/icons/lib/dist' から allIcons として * をインポートします。
......
ReactIcon.add.apply(ReactIcon、_toConsumableArray(Object.keys(allIcons).map(function (key) {
  allIcons[キー]を返します。
})));
......

'@ant-design/icons/lib/dist' によってエクスポートされたオブジェクトは { default: {...} } です。正しいアクセス形式は allIcons.default であり、allIcons ではありません。その結果、アイコンの正しいエクスポートオブジェクトを取得できません。この問題については、この問題を参照してください: https://github.com/ant-design/ant-design/issues/19002。ここで注意すべき点は、antd4.x バージョンが表示されないことですが、私たちのプロジェクトでは、現時点では 4 つのメジャーバージョンにアップグレードされません。では、どのように解決するのでしょうか。実際には、antd/lib の下のコンポーネントが参照されている限り、このような問題は発生しません。antd/lib/icon/index.js を参照できます。

......
var allIcons = _interopRequireWildcard(require("@ant-design/icons/lib/dist"));

function _interoprequirewildcard（obj）{obj＆amp;＆amp; obj .__ esmodule）{obj === null || _typeof（obj）！キャッシュ（） all（obj、key）{var desc = haspropertydescriptor（obj、key）：null; 「デフォルト」= obj;
......

ここで、_interopRequireWildcard メソッドはエクスポートの問題に対処するのに役立ちますので、babel-plugin-import の設定を変更したほうがよいのではないでしょうか。まあ、それはそれほど簡単ではありません。Vite は babel-plugin-import をあまりサポートしていません。まず、Vite の問題を探します。同様の質問があります: https://github.com/vitejs/vite/issues/1389。私はそれを見て、それでは私の問題は解決されないことがわかりました。そこに言及されているいくつかのプラグインから、いくつかのアイデアが得られました。私たちのニーズを満たす Vite プラグインを作成します。プラグインのアイデアは非常にシンプルで、antd コンポーネントの導入方法を均一に変更することです。

---修正前---
'antd' から Button をインポートします。

---修正後---
'antd/lib/button' から Button をインポートします。
'antd/lib/button/style/index.css' をインポートします。

ここで説明する必要があるのは、CSS スタイルの導入です。style/index または style/css が導入されると、require が定義されていないという問題が発生します。これは、これら 2 つの js ファイルでは require が使用されているものの、vite はプリコンパイル時に node 環境ではないため、当然エラーが報告されるからです。
このプラグインの使用方法については、 https://www.npmjs.com/package/antd-vite-import-plugin を参照してください。

3.「デフォルト」はエクスポートされません

サードパーティの依存関係をロードするときに、「default」がエクスポートされないなどのエラーが発生する場合があります。 https://github.com/vitejs/vite/issues/2679 を参照してください。

実際の開発プロセスでは、奇妙な問題に遭遇することは避けられません。これは、新しいことに挑戦する代償です。

スピードレース

vite の利点の 1 つは、高速であることです。では、webpack と比較するとどれくらいの差があるのでしょうか? ここでは、それぞれ webpack と vite を使用して同じローカルプロジェクトを開始します。

ビルドツール	起動時間（ミリ秒）
ヴィテ	702ミリ秒
ウェブパック	7093ミリ秒

これはあくまでも大まかな比較です。データからすると10倍の差があります。速度だけで言えば、Viteは非常に高速です。公式サイトの説明によると、Viteは依存関係を事前にビルドするためにesbuildを使用するとのこと。 Esbuild は Go で記述されており、JavaScript で記述されたバンドラーよりも 10 ～ 100 倍高速に依存関係を構築できます。

やっと

いくつかトラブルがあった後、vite2 はまだ成熟度が足りないと感じ、いくつかの小さなプロジェクトで試してみることにしました。私の場合、まずは webpack を使うことにしました。結局のところ、webpack は長年にわたって開発され、落とし穴もほとんどありませんが、vite はまだ react に最適ではありません。

antd+react プロジェクトを vite に移行するソリューションに関するこの記事はこれで終わりです。antd react を vite に移行することに関する関連コンテンツの詳細については、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: