1.viteを知る

Webpackは現在、フロントエンド全体で最も使用されているビルドツールですが、webpackの後に他のビルドツールがあります
ロールアップ、パーセル、ガルプ、バイトなど。
什么是vite呢？公式の位置付け：次世代のフロントエンド開発および構築ツール
次世代の開発およびビルドツールを定義するにはどうすればよいですか？
実際の開発では、私たちが書いたコードは、ES6、TypeScript、Vueファイルなどのブラウザーによって直接認識されないことがよくあります。
したがって、ビルドツールを使用してコードを変換およびコンパイルする必要があります。同様のツールは、webpack、rollup、parcelです。
しかし、プロジェクトが大きくなるにつれて、処理する必要のあるJavaScriptは指数関数的に増大し、モジュールが増えていきます。
ビルドツールはサーバーの起動に長い時間がかかり、HMRはブラウザーで応答するのに数秒かかります
つまり、世界は長い間webpackに苦しんでいるということわざもあります。
Vite（フランス語で「高速」と発音/ vit /）は、フロントエンドの開発エクスペリエンスを大幅に向上させる新しいフロントエンド構築ツールです。
それは主に2つの部分で構成されています
一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源

Viteは、すぐに使用できる構成を提供するように設計されており、プラグインAPIとJavaScript APIは、完全なタイプのサポートを備えた高度な拡張性をもたらします。

第二に、ブラウザはモジュール化をネイティブにサポートしています

これで、ブラウザはすでにes構文をサポートしています。これを使用する場合は、scriptタグにtype='module'を追加するだけで済みます。

例を使ってmath.jsを見てください

export function sum(num1, num2) {
    
    
  return num1 + num2;
}

main.js

import {
    
     sum } from './js/math.js';

console.log("Hello World");
console.log(sum(20, 30));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app"></div>
  
  <script src="./src/main.js" type="module"></script>
</body>
</html>

ライブサーバーを介してクロスドメインを解決し、index.htmlを実行します
ここに画像の説明を挿入

しかし、他のツールを使用せずにES Moduleを直接使用して開発する場合、何が問題になりますか？
まず、lodashを使用すると、数百のモジュールのjsコードが読み込まれることがわかります。これは、ブラウザーがリクエストを送信するための膨大な消費量です。
次に、コードにTypeScript、less、vueなどのコードが含まれている場合、ブラウザーはそれを直接認識できません。

3.Viteのインストールと使用

注：Vite自体もNodeに依存しているため、Node環境もインストールする必要があります
また、Viteではノードのバージョンがバージョン12よりも大きい必要があります
まず、viteツールをインストールしましょう
npm install vite –g # 全局安装
npm install vite –D # 局部安装
viteでプロジェクトを開始します
npx vite

4.CSSに対するViteのサポート

viteはcss処理を直接サポートできます
cssを直接インポートするだけです
viteは、lessなどのcssプリプロセッサを直接サポートできます。
直接インポートを減らす
その後、lessコンパイラをインストールします
npm install less -D
viteはpostcss変換を直接サポートします
postcssをインストールし、postcss.config.jsの構成ファイルを構成するだけです。
npm install postcss postcss-preset-env -D

5.TypeScriptに対するViteのサポート

viteはTypeScriptをネイティブでサポートしており、ESBuildを直接使用してコンパイルを完了します
直接インポートするだけです
ブラウザでリクエストを見ると、リクエストはまだtsのコードであることがわかります
これは、サーバーConnectinviteがリクエストを転送するためです
tsのコンパイル済みコードを取得し、それをブラウザーに返すと、ブラウザーはそれを直接解析できます

6.Viteによるvueのサポート

viteはvueの最優先サポートを提供します
Vue 3単一ファイルコンポーネントのサポート：@vitejs/plugin-vue
Vue3JSXは以下をサポートします。@vitejs/plugin-vue-jsx
Vue 2は以下をサポートします：underfin/vite-plugin-vue2
vueをサポートするプラグインをインストールします
npm install @vitejs/plugin-vue -D
vite.config.jsでプラグインを構成します

7.Viteパッケージングプロジェクト

現在のプロジェクトのパッケージツールは、Viteビルドを介して直接完成させることができます
npx vite build
プレビューメソッドを使用してローカルサービスを開始し、パッケージ化された効果をプレビューできます
npx vite preview

8、ESBuild分析

ESBuildの機能
超高速ビルドとキャッシュは必要ありません
ES6およびCommonJSをサポートするモジュール性
ES6をサポートするツリーシェイク
GoとJavaScriptをサポートするAPI
TypeScript、JSXおよびその他の構文コンパイルをサポート
SourceMapをサポートする
コード圧縮をサポート
他のプラグインの拡張のサポート

9.Vite足場ツール

開発では、viteを使用して、reactプロジェクト、Vueプロジェクトなど、すべてのプロジェクトを最初から構築することは不可能です。
現時点では、viteは対応する足場ツールも提供しています
つまり、Viteには実際には2つのツールがあります
vite：webpack、rollupに似たコンポーネントツールと同等
@ vitejs / create-app：クラス類似vue-cli、create-react-app
足場ツールの使用はどうですか？
npm init @vitejs/app
上記のアプローチは、足場を設置するプロセスを省略することと同等です
npm install @vitejs/create-app -g
create-app

上記の内容は主にコーダーの説明内容からです

Vite入門

Vite入門

1.viteを知る

第二に、ブラウザはモジュール化をネイティブにサポートしています

3.Viteのインストールと使用

4.CSSに対するViteのサポート

5.TypeScriptに対するViteのサポート

6.Viteによるvueのサポート

7.Viteパッケージングプロジェクト

8、ESBuild分析

9.Vite足場ツール

おすすめ