背景新しいプロジェクトで vue3 をアップグレードした後、当然のことながら vue-cli と webpack を vite に置き換えました。vite は本当に優れていると言わざるを得ません。コンパイル速度がちょうど良いだけでなく、vue3 の新機能のサポートも優れています。 しかし、開発プロセス中にいくつかの問題が発生しました。 「virtual:generated-pages」からルートをインポートします。 実際、多くの vite プラグインを使用していると、リファレンスに次のような使い方があることが分かりました。 「virtual:xxx」からxxxをインポートします。 では、なぜこれまでこの virtual:xxx を見たことがなかったのでしょうか? これは明らかに npm のパッケージではありません。何なのでしょうか? 仮想ファイルのインポートvite のドキュメントを読んだ後、これは仮想ファイルをインポートする機能であることがわかりました。インポートするための仮想ファイルを生成できます。 この機能は、vite ドキュメントのプラグイン API の仮想ファイルの導入に関するセクションで説明されています。仮想ファイルの導入をサポートするセクションに記述されています。つまり、このファイルは存在しないが、コードによって一時的に生成されるファイルです。 この生成はviteプラグインを通じて行われ、つまりnodejs環境に対応する仮想ファイルを生成します。 vite-plugin-pages はこの関数を通じて実装されます。コンパイル時にまず対応するページ ディレクトリをトラバースし、ディレクトリ構造とファイル名の命名規則に従って対応するルーティング テーブルを動的に生成し、ローカル ディレクトリ構造と動的ルーティングの良好な相互作用を実現します。 実はNuxtにも動的ルーティング機能があるのですが、仮想導入はされていません。プロジェクト開始前にWebpackの設定を動的に変更し、definePluginを使ってルーティングテーブルをフロントエンドコードに渡します。 仮想ファイルの機能を導入することで、定数を渡したり変更したりして、対応するデータをフロントエンド コードに渡す必要がなくなります。 定数を渡すだけでなく、仮想インポートではさらに多くのことができます。仮想 js ファイルをインポートすることを知っておく必要があります。つまり、関数を動的に生成し、その中にロジックをコード化することもできます。 例たとえば、生成されたコードに必要なファイルを自動的にインポートし、以前にインポートしたファイルを使用するための関数を返すことができます。このようにすると、実際の使用時にこれらのファイルをインポートする必要がなくなります。仮想ファイルにエクスポートされた関数を返すことで、元々インポートされていたこれらのファイルを直接使用できます。 'a-module' から a をインポートする 'b-module' から b をインポートします ... 'z-module' から z をインポートします 定数モジュール = {a,b,...,z} デフォルトのuseModule(name)をエクスポートする{ モジュール[名前]を返す } 以前使用したもの 👇 'a-module' から a をインポートする 'b-module' から b をインポートします ... 'z-moduleからzをインポートする () b() c() 今すぐ使う👇 'virtual:xxx' から useModule をインポートします。 定数a = useModule('a') 定数 b = useModule('b') 定数 c = useModule('c') もちろんこれは単なる単純な例であり、想像力を働かせてさらに多くの機能を見つけることができます。 書類ドキュメントに戻って、特定の機能がどのように実装されているかを見てみましょう。 文書に記載されている例は次のとおりです。 デフォルト関数 myPlugin() をエクスポートします。 const virtualFileId = '@my-virtual-file' 戻る { name: 'my-plugin', // 必須、警告とエラーで表示されます。resolveId(id) { if (id === 仮想ファイルID) { 仮想ファイルIDを返す } }, ロード(id) { if (id === 仮想ファイルID) { `export const msg = "仮想ファイルから"` を返します } } } } 主なポイントは 3 つあることがわかります。
返されたコードは文字列として返されることがわかります。テンプレートのスプライシングまたはテンプレートの変換を使用すると、返される必要のあるコード文字列を簡単に構築できます。 タイプスクリプトのサポートただし、仮想ファイルのインポートでは ts コードではなく js コードが返され、コードは動的に生成されることに注意してください。これは、使用中に TS で型サポートがない状況が発生することも意味します。 コード構造が特定の場合は、対応する d.ts 定義ファイルを事前に生成できます。その後、tsconfig でcompilerOptions.types を構成することで、対応する定義ファイルを読み込むことができます。コード構造が動的な場合は、対応する d.ts ファイルを動的に生成し、プロジェクトに書き込んで実装する必要があります。 モジュール 'virtual:xxx' を宣言します { ... } 要約する仮想ファイルの導入は非常に実用的な機能であることがわかります。フロントエンド コードがコンパイル環境と対話できるようになるだけでなく、以前は実装がそれほど便利ではなかったいくつかの機能を実装するためのコードを動的に生成することもできます。具体的な実装も開発が非常に簡単です。プラグインで使用する準備はできていますか? Vite 仮想ファイル導入の実装に関するこの記事はこれで終わりです。Vite 仮想ファイル導入の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Celery と Docker を使用して Django で定期的なタスクを処理する方法
システムをコンピューターにインストールする方法がわからない場合は、Linux を学習したい場合は、仮...
目次ネットワーク情報ホスト名を変更するDNSドメイン名解決ネットワーク関連コマンドファイアウォール暗...
この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...
最近仕事でnginxの設定を変更する必要が頻繁にあり、nginxでrewriteを使用する方法を学び...
目次概要1. 必要なソフトウェア環境を開発する1) VSコードのインストール2) ノード開発環境をイ...
人気があり強力な Apache Web サーバーで 2 つ以上のサイトをホストする方法。前回の記事で...
目次折りたたむ(減らす) for...of の使用whileループの使用折り畳み実装に近い展開する配...
コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...
重複したフォーム送信は、マルチユーザー Web アプリケーションで最も一般的で厄介な問題です。重複送...
1. ルートパスワードの設定と変更mysql が起動しているかどうかを確認します。起動していない場合...
ウェブサイトを作成する学生は、アクセス時に一部の nginx サーバーが 504 Gateway T...
1. MySQL 8.0.20をダウンロードして解凍するダウンロードリンク: https://dev...
この記事では、MySQL 5.6.23のインストールと設定のチュートリアルを参考までに紹介します。具...
GreaseMokey (中国語では Grease Monkey Script と呼んでいます) は...
序文:非常に遅いクエリとリクエストのタイムアウトのアラートを受け取りました。メトリックを通じて My...