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 をよろしくお願いいたします。