58.1k スターのフロントエンド開発テクノロジスタック (ツール): 2023 迅速な開発ツール vite のインストールと使用方法についての深い理解 (詳細)

Vite は、Web アプリケーション開発の速度を大幅に向上できる、迅速なフロントエンド開発および構築ツールです。Vite の主な機能は、高速な起動時間と高速なホットアップデートであり、これにより開発者はコードのテストとデバッグをより迅速に行うことができます。その目標は、プロジェクトを迅速に開始してリアルタイムでプレビューできる、シンプルで軽量な開発環境を提供することです。

この記事の原文:フロントエンド開発技術スタック (ツール): 2023 高速開発ツール vite のインストールと使用方法を深く理解する (詳細) 58.1k スター

Vue フロントエンドに関連する技術的な点については、公開アカウントであるCTO Plusのその後の投稿をご覧ください。ご質問がある場合は、コミュニケーションのためにバックグラウンドでメッセージを残してください。

Vite は、最新のブラウザのネイティブ ES モジュールサポートを利用して、開発プロセスのビルドステップを実行時まで延期する新しい開発モデルを採用しています。このブログでは、Vite の機能、構成、インストールと使用法、ホットアップデート、環境変数、プラグインのインストールと設定、開発サーバーの起動、Vite の使用方法などを詳しく理解します。開発プロセスを加速し、最後に他の機能 (キャッシュ、ts、css、静的リソース処理など) を加速します。

Vue 開発テクノロジの詳細については、パブリックアカウントCTO Plusのフォローアップ記事に注目してください。

バイトの概要

Vite は、フロントエンド開発エクスペリエンスを大幅に向上させる新世代のフロントエンド開発および構築ツールです。Vite は、すぐに使える構成を提供することを目的としていますが、そのプラグイン API と JavaScript API は高度な拡張性と完全な型サポートをもたらします。ネイティブ ES モジュールインポート方式により、非常に高速なサーバーのコールド起動を実現できます。

フロントエンドに関する大きなコラム: https://blog.csdn.net/zhouruifu2015/category_5734911

Viteは、vue の作者である You Yuxi が vue3.0 の開発中に開発した、ネイティブ ES-Module に基づくフロントエンド構築ツールです。その後の vue3 のプロモーションで、彼は新しい作品 Vite を大いに賞賛し、「もう webpack には戻らない」と述べました。

ヴィテのビルド

Vite は、ネイティブ ESM HMR API のセットを提供します。HMR 対応フレームワークはこの API を利用して、ページを再ロードしたりアプリケーションの状態をクリアしたりすることなく、即時に正確な更新を提供できます。Vite には、Vue.js シングルファイルコンポーネント (SFC) と React Fast Refresh に HMR が組み込まれています。

ヴィテの構成

ネイティブ ES モジュールに基づいた開発サーバーは、豊富な組み込み機能を提供し、高速で、ホットモジュールアップデート (HMR) をサポートします。

ロールアップを使用してコードをパッケージ化する一連のビルド手順。実稼働環境向けに高度に最適化された静的リソースを出力するように、すぐに使用できるように事前構成されています。同時に、豊富なプラグイン API も提供し、高度な拡張性をもたらします。vue、react、その他のプロジェクトの構築に使用できます。

Viteを選ぶ理由

開発中の Vite の主な利点は、起動時間が速いことです。従来のフロントエンド開発ツール (webpack など) では、プロジェクトの開始時に、モジュールの解析、コードのコンパイル、リソースのパッケージ化など、多くの構築作業が必要です。Vite は、ネイティブ ES モジュールに対するブラウザのサポートを利用し、ソースコードをブラウザ内で直接実行できるため、面倒な構築プロセスを回避し、第 2 レベルの起動時間を実現できます。

さらに、Vite はホットモジュール交換 (HMR) もサポートしています。これは、開発中にコードが変更された後、手動で更新することなくページがすぐに更新されることを意味します。これにより、開発効率が大幅に向上し、開発者は変更の結果をより早く確認できるようになります。

Viteのインストールと使用

Vite を使用するには、まず Node.js が開発環境にインストールされていることを確認する必要があります (最新バージョンを使用することをお勧めします)。次に、次のコマンドを使用して Vite をグローバルにインストールできます。npm または Yarn を使用してインストールできます。コマンドラインに次のコマンドを入力します。

npm install -g create-vite

インストールが完了したら、コマンドラインで「create-vite」コマンドを使用して新しい Vite プロジェクトを作成できます。

プロジェクトの作成

私のプロジェクトを作成-vite

デフォルトで空白のままにすると、vite-project という名前のプロジェクトが作成されますので、状況に応じてフレームワークを選択してください。ここでは Vue を選択します。

これにより、現在のディレクトリに「vite-project」という名前の新しいプロジェクトが作成されます。ディレクトリ構造は次のとおりです

次に、コマンドラインのプロンプトに従い、プロジェクトディレクトリを入力して依存関係をインストールし、次のコマンドを実行します。

cd vite プロジェクト

npmインストール

npm を使用して Vite のプロジェクトをビルドする

もちろん、vite をインストールし、npm と組み合わせて vite プロジェクトを構築することもできます。手順と手順は次のとおりです。

npm install -g vite

または

糸グローバル追加バイト

新しい Vite プロジェクトを作成します。次のコマンドを使用して新しいプロジェクトを作成できます。

npm init vite-app my-project

または

糸はvite-appの私のプロジェクトを作成します

これにより、「my-project」という新しいプロジェクトが作成され、そこに必要な依存関係がすべてインストールされます。インストールが完了したら、プロジェクトに入り、開発サーバーを起動できます。上記の手順と同様です。

開発サーバーを起動します

インストールが完了したら、開発サーバーを起動するには、次のコマンドを使用してプロジェクトを開始します。

cd vite プロジェクト

npm 実行開発

または

cd vite プロジェクト

糸開発

これにより、開発サーバーが起動し、ブラウザで新しいウィンドウが開き、アプリケーションが表示されます。

これにより、開発サーバーが起動し、ブラウザでプロジェクトのプレビューページが開きます。ブラウザーでプロジェクトをリアルタイムでプレビューおよびデバッグでき、コードを変更するとすぐにページが更新されます。

Vite のホットアップデートの使用

開発サーバーを起動したら、Vite のホットアップデート機能を使用して開発プロセスをスピードアップできます。これは、ページ全体を更新しなくても、行った変更をすぐに確認できることを意味します。

たとえば、コードにテキストを追加し、保存後すぐに変更を確認できます。

<template>  <div>    <h1>My Name is SteveRocket</h1>    <p>Welcome to my <b>CTO Plus</b></p>    <img src="../assets/wechat.png"/>  </div></template>

保存後、新しいテキストをすぐに見ることができます。このプロセスではサービスを再起動する必要はまったくありません。表示される内容は、ブラウザに直接表示されるものです。

構築と展開

開発が完了したら、次のコマンドを使用してプロジェクトをビルドできます。

npm ビルドを実行する

これにより、コードの圧縮、共通モジュールの抽出、ファイルフィンガープリントの生成などを含む、最適化された製品バージョンが生成されます。ビルドが完了したら、生成されたファイルを実稼働環境にデプロイできます。

デフォルトでは、Vite によって生成されたビルドファイルは静的であり、任意の静的ファイルサーバーにデプロイできます。最新のブラウザを使用している場合は、Vite が提供するプリレンダリング機能を使用して、ページを静的 HTML ファイルにプリレンダリングして、パフォーマンスと SEO を向上させることもできます。

Vite 環境変数

次に、Vite の重要な機能である環境変数を見てみましょう。環境変数を使用すると、開発者はさまざまな環境に応じてアプリケーションの動作を設定できます。

Vite の環境変数は、コマンドラインパラメータと `.env` ファイルの 2 つの方法で設定できます。

まず、コマンドラインパラメータを見てみましょう。Vite 開発サーバーを起動するとき、「--env」パラメータを使用して環境変数を渡すことができます。たとえば、「vite --env.NODE_ENV=production」は「NODE_ENV」を「production」に設定します。アプリケーション内で「import.meta.env」を使用してこれらの環境変数にアクセスできます。たとえば、「import.meta.env.NODE_ENV」は「production」を返します。

コマンドラインパラメータに加えて、`.env` ファイルを使用して環境変数を設定することもできます。`.env` ファイルはプレーンテキストファイルであり、各行は `key=value` キーと値のペアです。たとえば、「.env」ファイルには次の内容が含まれる可能性があります。

VITE_API_URL= https://mp.weixin.qq.com/s/sw-pK1SHnqhlUd81jwEKLA

VITE_API_KEY=1234567890

アプリケーション内では、「import.meta.env.VITE_API_URL」および「import.meta.env.VITE_API_KEY」を使用してこれらの環境変数にアクセスできます。

`.env` ファイルは開発モードでのみ使用できることに注意してください。運用モードでは、Nginx や Apache などのサーバーソフトウェアを使用して、サーバー上で環境変数を構成する必要があります。

さらに、Vite は、「.env.development」、「.env.production」、「.env.local」などの環境固有の設定ファイルの使用もサポートしています。たとえば、「.env.development」ファイル内の設定は開発モードでのみ有効であり、「.env.production」ファイル内の設定は実稼働モードでのみ有効であり、「.env.production」ファイル内の設定は開発モードでのみ有効です。 local` ファイルは、他の設定ファイルの同じ設定をオーバーライドします。

import.meta.env

Vite は特別な import.meta.env オブジェクトで環境変数を公開します。あらゆる状況で使用できる組み込み変数をいくつか示します。

import.meta.env.MODE: {string} アプリケーションが実行されるモード。
import.meta.env.BASE_URL: {string} アプリケーションをデプロイするときのベース URL。基本構成項目によって決まります。
import.meta.env.PROD: {boolean} アプリケーションが運用環境で実行されているかどうか。
import.meta.env.DEV: {boolean} アプリケーションが開発環境で実行されているかどうか (常に import.meta.env.PROD の逆)。
import.meta.env.SSR: {boolean} アプリケーションがサーバー上で実行されているかどうか。

.envファイル

env ファイルのコードを変更した場合、それを有効にするためにサービスを再起動する必要があります。

Vite は dotenv を使用して、環境ディレクトリ内の次のファイルから追加の環境変数を読み込みます。

.env # はすべての場合にロードされます

.env.local # すべての場合にロードされますが、git によって無視されます

.env.[mode] # 指定されたモードでのみロードします

.env.[mode].local # 指定されたモードでのみロードされますが、git によって無視されます

環境負荷の優先度

モードを指定するファイル (例: .env.production) は、一般的な形式 (例: .env) より優先されます。

さらに、Vite の実行時にすでに存在する環境変数が最も優先され、.env クラスファイルによって上書きされません。たとえば、VITE_SOME_KEY=123 vite build を実行する場合。

.env クラスファイルは Vite の起動時にロードされ、変更はサーバーの再起動後に有効になります。

ロードされた環境変数は、import.meta.env を通じて文字列の形式でクライアントのソースコードにも公開されます。

一部の環境変数が誤ってクライアントに漏洩することを防ぐために、VITE_ という接頭辞が付いた変数のみが vite で処理されたコードに公開されます。たとえば、次の環境変数は次のとおりです。

VITE_SOME_KEY=123

DB_PASSWORD=foobar

VITE_SOME_KEY のみが import.meta.env.VITE_SOME_KEY としてクライアントのソースコードに公開されますが、DB_PASSWORD は公開されません。

コンソール。ログ(インポート.メタ.環境. VITE_SOME_KEY) // 123

コンソール。log ( import . meta . env . DB_PASSWORD) // 未定義

さらに、Vite は dotenv-expand を使用して変数を直接展開します。構文の詳細については、ドキュメントを参照してください。

環境変数で $ 記号を使用する場合は、\ でエスケープする必要があることに注意してください。

キー=123

NEW_KEY1=test$foo # テスト

NEW_KEY2=テスト\$foo # テスト$foo

NEW_KEY3=test$KEY #test123

環境変数のプレフィックスをカスタマイズする場合は、「envPrefix」を参照してください。

安全上のご注意

.env.*.local ファイルはローカルである必要があり、機密変数を含めることができます。git によってチェックインされないようにするために、.gitignore に .local を追加する必要があります。
Vite ソースコードに公開される変数は最終的にクライアントパッケージに表示されるため、VITE_* 変数には機密情報を含めないでください。

TypeScriptに関する賢いヒント

デフォルトでは、Vite は vite/client.d.ts に import.meta.env のタイプ定義を提供します。.env[mode] ファイルでカスタマイズする環境変数が増えると、コード内で VITE_ というプレフィックスが付いたユーザー定義の環境変数に対して TypeScript IntelliTips を取得することが必要になる場合があります。

これを行うには、src ディレクトリに env.d.ts ファイルを作成し、次のように ImportMetaEnv 定義を追加します。

タイプスクリプト

/// <参照 タイプ=" vite/client " />

インターフェース ImportMetaEnv  {

  読み取り専用 VITE_APP_TITLE : 文字列

  //さらに環境変数...

インターフェース ImportMeta  {

  読み取り専用 環境:  ImportMetaEnv

コードが DOM や WebWorker などのブラウザー環境のタイプに依存している場合は、tsconfig.json の lib フィールドを変更してタイプのサポートを取得できます。

json

  " lib ":  [" WebWorker "]

HTML環境変数の置換

Vite は、HTML ファイル内の環境変数の置換もサポートしています。import.meta.env 内の任意の属性は、特別な %ENV_NAME% 構文を介して HTML ファイルで使用できます。

html

<h1>Vite は %MODE% で実行されています</h1>

<p>%VITE_API_URL% のデータを使用する</p>

import.meta.env に環境変数が存在しない場合 (%NON_EXISTENT% が存在しないなど)、無視され置換されません。これは、置き換えられる JS の import.meta.env.NON_EXISTENT とは異なります。 JS.では未定義です。

モデル

デフォルトでは、開発サーバー (dev コマンド) は開発モードで実行され、build コマンドは実稼働モードで実行されます。

これは、vite ビルドが実行されると、.env.production に存在する可能性のある環境変数が自動的に読み込まれることを意味します。

# .env.production

VITE_APP_TITLE=私のアプリ

アプリでは、import.meta.env.VITE_APP_TITLE を使用してタイトルをレンダリングできます。

場合によっては、vite のビルド時に別のモードを実行して別のタイトルをレンダリングしたい場合は、 --mode オプションフラグを渡すことで、コマンドで使用されるデフォルトモードをオーバーライドできます。たとえば、アプリをステージング (プレリリース) モードでビルドする場合は、次のようにします。

バッシュ

vite build --mode ステージング

新しい .env.staging ファイルを作成する必要もあります。

# .env.ステージング

VITE_APP_TITLE=マイアプリ (ステージング)

vite ビルドはデフォルトで実稼働モードビルドを実行するため、別のモードと対応する .env ファイル構成を使用して開発モードビルドを実行するように変更することもできます。

# .env.testing

NODE_ENV=開発

Vite 構成

Vite のデフォルト設定は、ほとんどのプロジェクトのニーズを満たすのに十分ですが、カスタム設定が必要な場合は、プロジェクトのルートディレクトリに `vite.config.js` ファイルを作成し、設定オブジェクトをエクスポートできます (このファイルは生成されます)デフォルトではプロジェクトによって異なります)。たとえば、プロジェクトのエントリファイル、出力ディレクトリ、プロキシ設定などを指定できます。TypeScript サポートや CSS プリプロセッサなどの追加など、プラグインを構成して Vite の機能を拡張することもできます。

以下は、単純な「vite.config.js」設定例です。

module.exports = {
   
     // 入口文件  root: './src/main.js',  // 输出目录  build: {
   
       outDir: './dist',  },  // 代理设置  server: {
   
       proxy: {
   
         '/api': 'http://localhost:3000',    },  },};

Vite プラグインのインストールと構成

Vite は、開発プロセスをさらにスピードアップするのに役立つ多くの便利なプラグインも提供します。たとえば、Vite のプラグインを使用すると、コードを自動的にフォーマットしたり、コードを自動的に完成させたり、コード内のエラーを自動的に検出したりすることができます。

Vite のプラグインを使用するには、プロジェクトにプラグインをインストールし、構成ファイルで構成します。たとえば、Vite の自動フォーマットプラグインをインストールするには、次のコマンドを使用できます。

npm インストール vite-plugin-prettier

または

糸追加 vite-plugin-prettier

次に、Vite 構成ファイルでプラグインを構成できます。

import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';import prettier from 'vite-plugin-prettier';
export default defineConfig({
   
     plugins: [    vue(),    prettier({
   
         // options    }),  ],});

Viteのその他の機能の紹介

npm依存関係の解析と構築

ネイティブ ES インポートは、次のベアモジュールインポートをサポートしていません。

import  {
    
    someMethod  }  from  ' my-dep '

上記のコードはブラウザでエラーをスローします。Vite は、読み込まれたすべてのソースファイルでそのようなベアモジュールのインポートを検出し、次のアクションを実行します。

1. 事前にビルドすると、ページの読み込み速度が向上し、CommonJS/UMD が ESM 形式に変換されます。プリビルドステップは esbuild によって実行されるため、Vite のコールドスタート時間が JavaScript ベースのパッケージャーよりもはるかに速くなります。

/node_modules/.vite/deps/my-dep.js?v=f3sf2ebd2.ブラウザがインポートを正しくインポートできるように、インポートを正当な URL に書き換えます。

依存関係は強力にキャッシュされます

Vite は HTTP ヘッダー経由でリクエストされた依存関係をキャッシュするため、依存関係を編集またはデバッグしたい場合は、ここの手順に従ってください。

事前に構築された依存関係

初めて Vite を起動すると、Vite はサイトをローカルにロードする前にプロジェクトの依存関係を事前に構築します。デフォルトでは、これは自動的かつ透過的に行われます。

これは、Vite が実行時に行う「依存関係の事前構築」です。このプロセスには次の 2 つの目的があります。

CommonJS と UMD の互換性:開発段階では、Vite の開発サーバーはすべてのコードをネイティブ ES モジュールとして扱います。したがって、Vite はまず CommonJS または UMD として提供される依存関係を ES モジュールに変換する必要があります。

CommonJS の依存関係を変換するとき、Vite はスマートインポート分析を実行するため、モジュールのエクスポートが動的に割り当てられている場合でも (React など)、名前付きインポートが適切に機能します。

//期待通り

import React , { useState } from ' react '

パフォーマンス:その後のページ読み込みパフォーマンスを向上させるために、Vite は多くの内部モジュールを持つ ESM 依存関係を単一のモジュールに変換します。

一部のパッケージは、相互にインポートする多数の個別のファイルとして ES モジュールを構築します。たとえば、lodash-es には 600 を超える組み込みモジュールがあります。「lodash-es」から import { debounce } を実行すると、ブラウザは 600 を超える HTTP リクエストを同時に発行します。たとえサーバーがそれらを簡単に処理できたとしても、大量のリクエストによりブラウザ側でネットワークの輻輳が発生し、ページの読み込みが大幅に遅くなる可能性があります。

lodash-es を単一のモジュールに事前に構築することで、必要な HTTP リクエストは 1 つだけになりました。

知らせ

依存関係の事前構築は開発モードでのみ機能し、esbuild を使用して依存関係を ES モジュールに変換します。実稼働ビルドでは、@rollup/plugin-commonjs が使用されます。

ファイルシステムキャッシュ

Vite は、事前に構築された依存関係を node_modules/.vite にキャッシュします。いくつかのソースに基づいて、ビルド前のステップを再実行する必要があるかどうかが決定されます。

パッケージマネージャーのロックファイルの内容 (package-lock.json、yarn.lock、pnpm-lock.yaml、bun.lockb など)。
パッチフォルダーの変更時刻。
vite.config.js の関連フィールド。
NODE_ENV の値。

上記のいずれかが変更された場合にのみ、プリビルドを再実行する必要があります。

何らかの理由で Vite に依存関係の再構築を強制したい場合は、開発サーバーの起動時に --force オプションを指定するか、node_modules/.vite キャッシュディレクトリを手動で削除できます。

ブラウザキャッシュ

事前構築された依存関係リクエストでは、HTTP ヘッダー max-age=31536000 を使用します。これは、開発中のページのリロードパフォーマンスを向上させるための強力なキャッシュのために不変です。これらのリクエストが一度キャッシュされると、開発サーバーに再びアクセスすることはありません。依存関係の異なるバージョンがインストールされている場合 (これはパッケージマネージャーのロックファイルに反映されます)、追加のバージョンによるクエリは自動的に失敗します。依存関係をローカルで編集してデバッグする場合は、次のことができます。

ブラウザの開発者ツールの [ネットワーク] タブからキャッシュを一時的に無効にします。
Vite 開発サーバーを再起動し、--force オプションを指定して依存関係を再構築します。
ページをリロードします。

TypeScript

Vite は当然 .ts ファイルのインポートをサポートしています。

Vite は .ts ファイルの変換のみを実行し、型チェックは実行しないことに注意してください。また、型チェックは IDE またはビルドプロセスによってすでに処理されていると仮定します。では、型チェックを有効にするにはどうすればよいでしょうか?

Vite が変換プロセスの一部として型チェックを含まない理由は、2 つのタスクが本質的に異なるためです。翻訳はファイルごとに実行でき、Vite のオンデマンドコンパイルモデルと完全に一致します。対照的に、型チェックにはモジュールグラフ全体の知識が必要です。Vite の変換パイプラインに型チェックを妨害すると、必然的に Vite の速度の利点が損なわれてしまいます。

Vite の仕事は、ソースモジュールをブラウザで実行できる形式にできるだけ早く変換することです。これを行うには、Vite の変換パイプラインから静的分析チェックを分離することをお勧めします。この原則は、ESLint などの他の静的分析チェックにも当てはまります。

実稼働ビルドをビルドするときは、Vite のビルドコマンドの外部で実行できますtsc --noEmit。
開発中、より多くの IDE プロンプトが必要な場合は、別のプロセスで実行することをお勧めしますtsc --noEmit --watch。報告された型エラーをブラウザで直接確認したい場合は、vite-plugin-checker を使用できます。

Vite は esbuild を使用して TypeScript を JavaScript に変換するため、約tsc20 ～ 30 倍高速になり、同時に HMR の更新がブラウザに反映されるまでの時間は 50 ミリ秒未満になります。

型のみのインポートおよびエクスポート構文を使用すると、「型のみのインポートが正しくパッケージ化されない」という潜在的な問題を回避できます。その記述例は次のとおりです。

 ' only/types 'からタイプ {
    
    T  } をインポートします

エクスポート タイプ {
    
    T  }

クライアントタイプ

Vite のデフォルトの型定義は、Node.js API 用に書かれています。これを Vite アプリケーションのクライアントコード環境に追加するには、d.ts 宣言ファイルを追加します。

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

あるいは、vite/client を tsconfig.json の COMPilerOptions.types に追加することもできます。

{
   
     "compilerOptions": {
   
       "types": ["vite/client"]  }}

これにより、次の型定義が追加されます。

リソースのインポート (例: .svgファイルのインポート)
import.meta.envVite によって挿入される環境変数の型定義
import.meta.hotHMR API タイプ定義

ヒント

デフォルトのタイプ定義をオーバーライドするには、定義したタイプを含むファイルを追加し、トリプルスラッシュコメントの前に定義を追加してください。vite/client を参照してください。

たとえば、React コンポーネントで *.svg ファイルのタイプを定義するには:

vite-env-override.d.ts(入力内容を含むファイル):

・ts

 モジュール ' *.svg 'を宣言します{

  const コンテンツ: 反応します。FC <反応。SVGProps < SVGElement >>

   デフォルトの コンテンツをエクスポートする

}

· への参照を含むファイルvite/client:

/// <参照 タイプ=" ./vite-env-override.d.ts " />

/// <参照 タイプ=" vite/client " />

CSS

.css ファイルをインポートすると、コンテンツが <style> タグに挿入され、HMR もサポートされます。モジュール用にデフォルトでエクスポートされた処理済みの CSS を文字列として取得することもできます。

パスのインポートは @import の使用をサポートしています。例: @import './base.css';
CSS モジュールの使用をサポートします。を参照してください。

サフィックスが.module.css付いた CSS モジュールファイルとみなされます。このようなファイルをインポートすると、対応するモジュールオブジェクトが返されます。

/* example.module.css */

。赤 {

赤色;

}

「./example.module.css」からクラスをインポートします

document.getElementById('foo').className = class.red

CSS モジュールの動作はcss.modulesオプションを通じて設定できます。

css.modules.localsConvention設定でキャメルケース形式の変数名の変換 (例: ) が有効になっている場合はlocalsConvention: 'camelCaseOnly'、名前によるインポートも使用できます。

// .apply-color -> applyColor

import { applyColor } から './example.module.css'

document.getElementById('foo').className = applyColor

CSSプリプロセッサのサポート

Vite は最新のブラウザのみを対象としているため、ネイティブ CSS 変数と CSSWG ドラフトを実装する PostCSS プラグイン (postcss-nesting など) を使用して、シンプルで将来性のある CSS を作成することをお勧めします。そうは言っても、Vite は .scss、.sass、.less、.styl、.stylus ファイルの組み込みサポートも提供します。特定の Vite プラグインをインストールする必要はありませんが、対応するプリプロセッサの依存関係をインストールする必要があります。

# .scss と .sass

npm add -D sass

＃。少ない

npm add -Dless

# .styl と .stylus

npm add -D スタイラス

さらに、次の設定を vite.config.ts に追加する必要があります。

  css: {
   
         // css预处理器      preprocessorOptions: {
   
           scss: {
   
             additionalData: '@import "@/assets/style/mixin.scss";@import "@/assets/style/variable.scss";' //引入全局scss样式        }      }    }

style.module.scss のように、ファイル拡張子の先頭に .module を追加することで、CSS モジュールをプリプロセッサで使用することもできます。(これは反応プロジェクトで使用されています)

ページへの CSS インジェクションを無効にする

CSS コンテンツの自動挿入は、?inline パラメータを使用してオフにできます。閉じると、処理された CSS 文字列がモジュールのデフォルトのエクスポートとして使用されますが、スタイルはページに挿入されません。

import './foo.css' // スタイルがページに挿入されます

import otherStyles from './bar.css?inline' //スタイルはページに挿入されません

知らせ

Vite 4 では、デフォルトのインポートと CSS ファイルの名前によるインポート (例: './foo.css' からのインポートスタイル) は非推奨になりました。代わりに ?inline パラメータを使用してください。

静的リソースの処理

静的リソースの導入方法

'./img.png' から imgUrl をインポート

document.getElementById('hero-img').src = imgUrl

たとえば、imgUrl は開発中は /img.png となり、運用ビルド後は /assets/img.2d8efhg.png になります。

動作は Webpack のファイルローダーに似ています。違いは、インポートでは絶対パブリックパス (開発時のプロジェクトルートパスに基づく) または相対パスのいずれかを使用できることです。

CSS の url() 参照は同じ方法で処理されます。
Vite が Vue プラグインを使用している場合、Vue SFC テンプレート内のリソース参照は自動的にインポートに変換されます。
一般的な画像、メディア、フォントファイルタイプは、リソースとして自動的に検出されます。内部リストは、assetsInclude オプションを使用して拡張できます。
参照されたリソースはリソースグラフの構築の一部として組み込まれ、ハッシュされたファイル名が生成され、最適化のためにプラグインによって処理できます。
assetsInlineLimit オプション値より小さいリソースは、base64 データ URL にインライン化されます。
デフォルトでは、TypeScript は静的リソースのインポートを有効なモジュールとして扱いません。この問題を解決するには、vite/client を追加する必要があります。(vue Scaffolding を使用してプロジェクトを初期化します。これらは自動的に構成されます)
Git LFS プレースホルダーは、それが表すファイルの内容を含まないため、インライン化から自動的に除外されます。インライン化するには、ビルドする前に必ず Git LFS 経由でファイルの内容をダウンロードしてください。
パブリックディレクトリ

次のリソースがある場合:

ソースコードからは参照されません (例robots.txt: )
元のファイル名を維持する必要があります (ハッシュ化しない)
...または、リソースをまったくインポートせずに、その URL を取得するだけです。

次に、指定したパブリックディレクトリにリソースを配置できます。このパブリックディレクトリはプロジェクトのルートディレクトリに配置する必要があります。このディレクトリ内のリソースは、開発中に / root パスを通じて直接アクセスでき、パッケージ化中にターゲットディレクトリのルートディレクトリに完全にコピーされます。

ディレクトリのデフォルトは <root>/public ですが、publicDir オプションを使用して構成できます。

ご注意ください：

にインポートされたリソースはpublic常にルートの絶対パスを使用する必要があります。たとえば、はpublic/icon.pngソースコード内で参照される必要があります/icon.png。
publicのリソースは JavaScript ファイルによって参照されるべきではありません。

新しい URL(url, import.meta.url)

import.meta.url は、現在のモジュールの URL を公開する ESM のネイティブ関数です。これを JavaScript モジュールでネイティブ URL コンストラクターと組み合わせると、相対パスを介して完全に解析された静的リソース URL を取得できます。

const imgUrl = 新しい URL('./img.png', import.meta.url).href

document.getElementById('hero-img').src = imgUrl

これは最新のブラウザでネイティブに動作します。実際、Vite は開発中にこのコードを扱う必要がありません。このモードは、文字列テンプレートを介した動的 URL もサポートします。

関数 getImageUrl(名前) {

新しい URL(`./dir/${name}.png`, import.meta.url).href を返します

}

実稼働ビルド中に、Vite は必要な変換を実行して、パッケージ化とリソースのハッシュ化後も URL が正しいアドレスを指していることを確認します。ただし、分析を容易にするために、この URL 文字列は静的である必要があります。それ以外の場合、コードはそのまま残され、build.target が import.meta.url をサポートしていない場合はランタイムエラーが発生します。

// Vite はこれを変換しません

const imgUrl = 新しい URL(imagePath, import.meta.url).href

例：

<body>  <img id="imgbox"></img>  <script type="module">      // 在原生方式直接这样引用不行呢，需要使用new URL 结合import.meta.url的方式      // import imgUrl from './straw.jpg'      // import.meta是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息，比如说这个模块的 URL。      // 注意：1.js的type类型需是module 2.返回的地址是绝对路径      console.log('import.meta',import.meta)      //new URL() 创建并返回一个URL对象，该 URL 对象引用使用绝对 URL 字符串，相对 URL 字符串和基本 URL 字符串指定的 URL。      // 如果url参数是相对 URL，则构造函数将使用url参数和可选的base参数作为基础。      const url = new URL('./straw.jpg',import.meta.url).href      document.getElementById('imgbox').src = url      // document.getElementById('imgbox').src = imgUrl</script></body>

注: SSR では使用できません

Vite をサーバーサイドレンダリングモードで使用している場合、import.meta.url のセマンティクスがブラウザと Node.js で異なるため、このモードはサポートされません。サーバー側製品も、クライアントのホスト URL を事前に決定することはできません。

要約する

全体として、Vite は Web アプリケーションの開発を大幅にスピードアップできる非常に便利なツールです。高速な起動時間とホットアップデート機能により、開発者はコードのテストとデバッグをより迅速に行うことができます。さらに、Vite は開発プロセスをさらに加速するのに役立つ多くの便利なプラグインも提供します。高速で強力なビルドツールを探している場合は、Vite を試してみる価値があります。

最後に、この記事が Vite ツールの理解と使用に役立つことを願っています。

参考リンク

Github アドレス: https://github.com/vitejs/vite.git

インポート.メタ.url

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta

アセットインライン制限オプション

https://cn.vitejs.dev/config/build-options.html#build-assetsinlinelimit

資産オプションを含む

https://cn.vitejs.dev/config/shared-options.html#assetsinclude

すぐに/顧客

https://cn.vitejs.dev/guide/features.html#client-types

URL コンストラクター

https://developer.mozilla.org/en-US/docs/Web/API/URL

CSSモジュール

https://github.com/css-modules/css-modules

フロントエンドに関する大きなコラム
https://blog.csdn.net/zhouruifu2015/category_5734911 https://blog.csdn.net/zhouruifu2015/category_5734911 Node.js コラム

https://blog.csdn.net/zhouruifu2015/category_5728369.html https://blog.csdn.net/zhouruifu2015/category_5728369.html

詳細情報 · WeChat 公開アカウントで [CTO Plus] を検索し、フォローして詳細情報を入手し、一緒に学び、コミュニケーションしましょう。

公開アカウントの説明については、次のリンクを参照してください。

Articulate について「知識とテクノロジーのポーターであれ。生涯学習の愛好家であれ。深さと幅のある技術サークルであれ。」私は常に専門分野でスキルを磨きたいと思っていました https://mp.weixin.qq. com / s/0yqGBPbOI6QxHqK17WxU8Q

推奨読書: