Viteは仮想ファイルの実装を導入します

Viteは仮想ファイルの実装を導入します

背景

新しいプロジェクトで vue3 をアップグレードした後、当然のことながら vue-cli と webpack を vite に置き換えました。vite は本当に優れていると言わざるを得ません。コンパイル速度がちょうど良いだけでなく、vue3 の新機能のサポートも優れています。

しかし、開発プロセス中にいくつかの問題が発生しました。

vite-plugin-pagesプラグインを見た後、突然次のような書き方を目にしました:

「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 つあることがわかります。

  • virtualFileId: 導入する仮想ファイル名
  • resolveId(id): 解決する必要がある仮想ファイル名であるかどうかを判定します
  • load(id): 対応する仮想インポートファイルのコード文字列を返します

返されたコードは文字列として返されることがわかります。テンプレートのスプライシングまたはテンプレートの変換を使用すると、返される必要のあるコード文字列を簡単に構築できます。

タイプスクリプトのサポート

ただし、仮想ファイルのインポートでは ts コードではなく js コードが返され、コードは動的に生成されることに注意してください。これは、使用中に TS で型サポートがない状況が発生することも意味します。

コード構造が特定の場合は、対応する d.ts 定義ファイルを事前に生成できます。その後、tsconfig でcompilerOptions.types を構成することで、対応する定義ファイルを読み込むことができます。コード構造が動的な場合は、対応する d.ts ファイルを動的に生成し、プロジェクトに書き込んで実装する必要があります。

モジュール 'virtual:xxx' を宣言します {
...
}

要約する

仮想ファイルの導入は非常に実用的な機能であることがわかります。フロントエンド コードがコンパイル環境と対話できるようになるだけでなく、以前は実装がそれほど便利ではなかったいくつかの機能を実装するためのコードを動的に生成することもできます。具体的な実装も開発が非常に簡単です。プラグインで使用する準備はできていますか?

Vite 仮想ファイル導入の実装に関するこの記事はこれで終わりです。Vite 仮想ファイル導入の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vite と Vue CLI の長所と短所
  • vite2.0+vue3 モバイルプロジェクトの詳細な説明
  • vue3 プロジェクトを素早く構築し、関連機能を紹介する vite+ts の詳細な説明
  • vite2.0 設定学習の詳しい説明(typescript 版)
  • vite+vue3+element-plus プロジェクトをビルドする手順
  • Vue3.0+vite2は動的非同期コンポーネントの遅延読み込みを実装します
  • プロジェクトを素早く構築するためのvite+vue3.0+ts+element-plusの実装
  • Vite2+Vue3を使用してMarkdownドキュメントをレンダリングする練習
  • antd+reactプロジェクトをviteに移行するためのソリューションの詳細な説明

<<:  MySQL 継続的集計の原理と使用法の分析

>>:  Celery と Docker を使用して Django で定期的なタスクを処理する方法

推薦する

VMware Workstation のインストール Linux (Ubuntu) システム

システムをコンピューターにインストールする方法がわからない場合は、Linux を学習したい場合は、仮...

Linux ネットワーク システムの紹介

目次ネットワーク情報ホスト名を変更するDNSドメイン名解決ネットワーク関連コマンドファイアウォール暗...

JavaScript ベースのシンプルなカルーセルの実装

この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...

nginx rewriteを使用してURLをリダイレクトする方法

最近仕事でnginxの設定を変更する必要が頻繁にあり、nginxでrewriteを使用する方法を学び...

Vue Element フロントエンドアプリケーション開発開発環境の準備

目次概要1. 必要なソフトウェア環境を開発する1) VSコードのインストール2) ノード開発環境をイ...

Apache Web サーバーを使用して 2 つ以上のサイトを構成する方法

人気があり強力な Apache Web サーバーで 2 つ以上のサイトをホストする方法。前回の記事で...

JS での Reduce Fold Unfold の使用法の詳細な説明

目次折りたたむ(減らす) for...of の使用whileループの使用折り畳み実装に近い展開する配...

IEのクラッシュバグ

コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...

ユーザーがフォームを繰り返し送信するのを防ぐ方法の概要

重複したフォーム送信は、マルチユーザー Web アプリケーションで最も一般的で厄介な問題です。重複送...

ルートパスワードを変更するための MySQL 設定、MySQL サーバー接続、MySQL 共通コマンド図

1. ルートパスワードの設定と変更mysql が起動しているかどうかを確認します。起動していない場合...

nginx「504 ゲートウェイタイムアウト」エラーを解決する

ウェブサイトを作成する学生は、アクセス時に一部の nginx サーバーが 504 Gateway T...

MySQL 8.0.20 Window10無料インストール版設定とNavicat管理チュートリアルグラフィック詳細説明

1. MySQL 8.0.20をダウンロードして解凍するダウンロードリンク: https://dev...

MySQL 5.6.23 のインストールと設定環境変数のチュートリアル

この記事では、MySQL 5.6.23のインストールと設定のチュートリアルを参考までに紹介します。具...

Chrome 4.0 は GreaseMonkey スクリプトをサポートします

GreaseMokey (中国語では Grease Monkey Script と呼んでいます) は...

オンラインMySQLオプティマイザの誤判断によって発生した低速クエリイベントを記録する

序文:非常に遅いクエリとリクエストのタイムアウトのアラートを受け取りました。メトリックを通じて My...