Vueの新しいフロントエンド構築ツールViteについて話しましょう（初体験）

この記事では、Vue の新しいフロントエンド構築ツール Vite を初めて体験し、vue-cli によって初期化されるディレクトリとの違いについて説明します。誰にとっても役に立つでしょう！

Vite と Vue3 は 2022 年には新しいものではないはずですが、私のようにまだ新しいものではない人もたくさんいるはずです。この二つの「新しいもの」に触れた人たち。 (学習ビデオ共有: vuejs チュートリアル)

これら 2 つ (Vite Vue3) は私にとってまったく新しいおもちゃのように感じられます。これがトレンドです。新しい時代の。

手元にある webpack Vue2 を見ると、angularjs gulp と同じになるのかな数年前、歴史になりました。

新年が近づき、少し時間ができたので、何度も言及している新しいフロントエンド構築ツール Vite 、新しくアップグレードされた を紹介しましょう。 Vue3!

Vite から始めましょう

Vite の公式紹介を見てみましょう。

ローカルで開発する場合、Vite は ネイティブ ES モジュール を使用することがわかります: Modernブラウザ (最新バージョンの Google など) は、webpack 管理パッケージ モジュールに依存する必要がなくなり、Nodejs と同じモジュール管理機能を持つことができます。これは native です。 ES モジュール 能力。

したがって、ローカルで開発する場合、Vite は時間のかかるコンパイル プロセスを省略し、ホット アップデートは自然に高速になります。

実稼働製品を構築する場合、最新のブラウザ製品を構築することも、Rollup を通じて実稼働環境用に高度に最適化された静的リソースを出力することもできます。 ——これがどの程度高度に最適化されているかについては、後の記事で詳しく説明します。

はじめに

Vite 始めるのは非常に簡単で、npm create vite@latest コマンドを実行するだけです。

npm create は実際には npm init コマンドであり、パッケージ名を持つ npm init コマンドは npm exec## です。 #、つまり、vite パッケージを実行するデフォルトのコマンド - Initialization。

コマンドを入力した後、プロジェクト名とテクノロジー スタックを追加する必要があります。(以下に示すように) 選択できるテクノロジー スタックがいくつかあることがわかります。

#vite サポートされているフレームワークは 6 つありますが、そのうちの半分は認識できません。

vanilla: Vanilla JS は、高速、軽量、クロスプラットフォームの JavaScript フレームワークです。 Vanilla JS は世界で最も軽量な JavaScript フレームワーク (数少ないフレームワークの 1 つ) です。実際、これはネイティブ JS です。

• vue/react: この 2 つについては、あまり紹介する必要はありません。
• preact: React の軽量な代替品。
• lit: Lit は、高速で軽量な Web コンポーネントを構築するためのシンプルなライブラリです。 (構文を見てみると、とても楽しいと思います。)
• svelte: Virtual DOM
を使用しないライブラリ – とてもクールです。このライブラリの作成者は、
• Rollup の作成者と同じ人です。 ここでは、作成する vue
ts

を選択しました。

#次に、この新しく作成されたプロジェクト ディレクトリがどのようなものかを見てみましょう。 (以下に示すように)

と

vue-cli で初期化されたディレクトリには 2 つの違いがあります:

index.html エントリ ファイルはルート ディレクトリに移動されました。公式の説明は次のとおりです。Vite は開発中のサーバーであり、

index.html

は Vite プロジェクトのエントリ ファイルです。

• vite.config.ts は、

  vue.config.js
を
• vite

  プロジェクトの構成ファイルとして置き換えます。 次に、package.json の内容を見てみましょう。 (下)

  {
    "name": "vite-try",
    "version": "0.0.0",
    "scripts": {
      "dev": "vite",
      "build": "vue-tsc --noEmit && vite build",
      "preview": "vite preview"
    },
    "dependencies": {
      "vue": "^3.2.25"
    },
    "devDependencies": {
      "@vitejs/plugin-vue": "^2.0.0",
      "typescript": "^4.4.4",
      "vite": "^2.7.2",
      "vue-tsc": "^0.29.8"
    }
  }

上記からわかるように、

Vue

プロジェクトは Vite を使用して初期化されており、

Vue

のバージョンはすでに最新Vue3 はなくなりました。開発中に、依存関係も vue-cli/webpack シリーズから vite シリーズに切り替えられました。 <h3><strong>プロジェクトを開始する</strong></h3> <p><code>Vue3 の新しい構文を体験する前に、まずプロジェクトを開始して効果を確認してください。

npm i を使用して依存関係をインストールした後、npm run dev を使用して ローカル開発 モードを開始します。

#プロジェクトを実行したところ、その起動速度に本当に驚きました。

これは

Vue2 よりもはるかに高速です 初期化されたプロジェクトの起動ははるかに高速で、瞬く間にプロジェクトが開始されます。

もちろん、その導入部分から、

Vite はローカル開発中に ネイティブ ES モジュール を使用するため、プロセス中にモジュールのコンパイルが関与しないことがわかります。 、時間を大幅に節約できます。

ローカルで実行されているモジュールの表示

コンソールを開いて、最初に

html ファイルを確認します。 (下図の通り)

朝からわかるように、

htmlにmain.tsが導入されています。 、これはプロジェクトのエントリ ファイルです。 (以下に示すように)

上の図からわかるように、コードは翻訳されていないネイティブの

import のままです。 . .

ただし、ここでは、

ts と vue を含む、要求されたリソースが表示されます。

Google Chrome は、

ts および vue ファイルの直接読み込みをすでにサポートしていますか?実際にはそうではありません。ここでの秘密は、ファイルの応答ヘッダー Content-Type にあり、ブラウザーがファイルを処理する方法を決定します。 (以下に示すように)

他の

.vue ファイルをクリックすると、.vue が表示されます。 ファイルは引き続きコンパイルされ、ブラウザで認識できる js タイプになりますが、モジュールは引き続き Google Chrome でサポートされている ネイティブ ES モジュール を使用します。 (以下に示すように)

ページがどのように見えるかを見てみましょう。 (以下に示すように)

emmmmm、古典的な

Vue スタートアップ ページ。

上の図の 2 行が私の注意を引きました:

• 推奨される IDE は

  vscode volar です。

• components/HelloWorld.vue を変更して、ローカル ホット アップデート機能をテストします。

vscode volar

vscode は、vue を書くためにいつも使用しているコード エディタです。 、しかし volar とは何ですか?

確認したところ、これは

vue3 文法をサポートするための vscode のプラグインであり、インテリジェントな文法プロンプトとエラー チェックに使用できることがわかりました。 (下図の通り)

# 思い切って設置してください。 ——

優秀な学生にはシャトル、劣等生には多くの文具

このプラグインは

vetur プラグインと競合する可能性があることがドキュメントに記載されています. 2 つのうち 1 つだけを開くことをお勧めします。 (確かに) したがって、ワークスペースにいる場合は、競合を避けるためにプラグインを 1 つだけ開いてください。

ローカル ホット アップデート

次に、

components/HelloWorld.vue を変更して、ローカル ホット アップデート機能をテストします。

実際、試す必要はないと思いますが、間違いなく非常に高速になります。

コードを変更した後、ホット アップデートは保存された瞬間に完了しますが、これはほとんど気づかれません。

これはプロジェクトのサイズが小さいことにも関係しますが、大規模なプロジェクトの場合は、コード変更後のホット アップデートの速度を再度検証する必要があります。

プロジェクトをビルドする

ローカル開発はすでに経験済みなので、プロジェクトをビルドして製品がどのようなものになるかを見てみましょう。

npm run build コマンドを使用してプロジェクトをビルドします。ここでエラーが見つかりました。 (以下に示すように)

これは新しく初期化されたプロジェクトですが、初めてビルドするとエラーが発生するのはなぜですか?

ここで報告されたエラーは、オプションのチェーン演算子構文で報告されたエラーであることがわかります。よく考えてみると、node## の問題であるはずです。 ＃ バージョン。私のローカルの node バージョンは v12.20.0 です。公式ドキュメントを検索したところ、確かに関連する問題レコードがあることがわかりました。 (以下に示すように)

vue ts のテンプレートは、node の上位バージョンに依存しているようです。 、node バージョンを v14.15.0 に切り替え、ビルド コマンドを再度実行したところ、成功しました。 (以下に示すように)

##最終的に構築されたコードは、

Rollup

、Rollup によってパッケージ化されています。私も使ったことがないので、彼の公式の紹介を見てみましょう。

ここで重要なことは、

rollup

と webpack、 の違いを理解することです。 rollup のモジュール パッケージ化機能は webpack ほど強力ではありませんが、tree-shaking を使用して js ファイルを完全に処理し、## をパッケージ化します#js ファイル 「よりクリーン」になります。 次に、dist

ディレクトリに入り、

anywhere (単純な http サーバー) を使用してプロジェクトを実行して確認します。 ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ ＃として上の図からわかるように、vite パッケージ ファイルでは、エントリ js

が

DOM レンダリング スレッドを直接ブロックしています。ただし、これら 2 つの js ファイルは大きくなく、合計すると

53k

になります。 もちろん、プロジェクトが大きくなるにつれて、このボリュームはますます大きくなります。

互換性の問題を指摘する新しいフレームワークが発表されると、誰もがそのコミュニティ活動に関心を持ち、次にその互換性が気になります。

Vite のパッケージ化されたコードの互換性を見てみましょう。 (以下に示すように) ##Vite の公式紹介によると、デフォルト構成でビルドされたコードは最新のバージョンのみをサポートします。ブラウザ、つまり以下のものです。

は、構成 (

ES6

) を変更することで、少なくとも

es2015 をサポートできます (つまり、 IEではサポートされていません）。

ただし、プラグイン (

@vitejs/plugin-legacy) を介して従来のブラウザ (IE11 など) をサポートできます。ただし、IE11 が限界のようで、それ以下のバージョンでは問題が発生する可能性があります。 したがって、ブラウザの互換性要件が厳密である場合は、

Vite

を慎重に使用してください。

概要

さて、Vite

の初めての体験はここで終わります。

Vite で新しいプロジェクトを作成し、コードを変更して変更内容を確認します。最後に、プロジェクトをビルドしてローカルでプレビューします。

Vite を使用すると、これらすべてを比較的簡単に行うことができ、すぐに実行できます。

Vite

Vue3

を使用して、練習用の小さなプロジェクトをいくつか作成し、それに適した運用プロジェクトがあるかどうかを確認してみようと思います。 次回は、

Vue3

を使った最初の体験についてお話しますので、引き続き注目していただければ幸いです。 <p> (学習ビデオ共有: <a href="https://www.php.cn/course/list/1.html" target="_blank">Web フロントエンド開発</a>、<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程入门">プログラミング入門</a>)</p>

以上がVueの新しいフロントエンド構築ツールViteについて話しましょう（初体験）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。