Zenn
🐕

Viteの読み方を初めて知った

2022/05/20に公開
Linux
Node.js
webpack
ビルド
Vite
tech

今回の内容

いつもLinuxの環境構築などでお世話になってるここのサイトから今日はViteについて( ･ω･ )/

Viteってなんぞ?

Viteとは
  • 従来のビルドツール(Vue CLI等)に比べて、高速で動作するビルドツール
  • HMR(Hot Module Replacement)(画面の再描画なしに変更を適用してくれる機能)がある(だから高速)
  • 読み方はヴィート(私はずっとヴァイトだと思ってました... orz)

ビルドとは？
  • 記述したソースコードに問題がないかどうかの解析を行い、問題がなければ実行可能なファイルに変換すること
  • コンパイルはソースコードをプログラミング言語から機械語に翻訳する作業のことで、ビルドの中に含まれる作業の1つ

    ちなみに
  • デプロイ = 開発したアプリケーションをサーバー上に展開・配置すること
  • リリース = アプリケーションを公開する作業
    です（*’∀’人）
    ビルドはデプロイに必要な実行ファイルを作ること、ですね！ふむふむ。

Vite vs Webpack


Webpack

Webpackはバンドラーベースのビルドツール。

  • アプリケーション全体を提供する前に、アプリケーション全体を隅々までクロールしてビルドする必要あり。
  • JavaScriptバンドル全体がWebpackによって再構築されるため、HMRを有効にしても、ブラウザに変更が反映されるまで最大で10秒かかることがある、とのこと。
Vite

  • ブラウザ上でESモジュールが利用できるようになったことで、バンドルしなくてもブラウザ上でJavaScriptアプリケーションを動作させることができるようになった。
  • ブラウザが要求したときに ES モジュールを使ってアプリケーションコードの一部を変換して提供する。
  • esbuild(Goで実装されたJavaScript/TypeScriptのコード変換+バンドルツール)を使って処理されているので、Webpackの10-100倍の速度で動作する

とりあえず事前に依存関係の解決・最低限のバンドルだけやって、ESModulesのimportさん、ソースコードを読み込むのは任せた！ってことでいいんだろうか...

そして、じゃあWebpack使うメリットって何？ってなってるので詳しい方いたら教えてください( ´-ω-`)

使ってみる

ディレクトリの作成、初期化、Viteのインストール
npm init -y vite-app　作成したいディレクトリ名

★npmはNode.jsインストール時に一緒にインストールされるので今回は省略

package.jsonの確認
{
  "name": "envader-practice",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.4"
  },
  "devDependencies": {
    "vite": "^1.0.0-rc.13",
    "@vue/compiler-sfc": "^3.0.4"
  }
}

こんな感じになってるかな、と。
scriptsの中に、devという起動するためのコマンドと、buildという本番環境用のファイルを出力するためのビルドコマンドがありますね。よしよし。

インストール

作成できたディレクトリに移動して依存パッケージをインストール

cd ディレクトリ名
npm install
起動してみる
npm run dev

小さなアプリじゃ速さの恩恵が全然感じられないけれど、大規模開発になったら本領を発揮してくれるんだろう、という予想をしつつ今回は終了。

以上、Viteについての調査でした(`･ω･´)ゞ　ﾋﾞｼｯ

実際にターミナル操作をやってみたいな〜という方はここのサイトで実際にやってみるのがいいかと( •̀ω•́ )/
実際に仮想環境でコマンドをじゃんじゃん叩けるのでパソコンが壊れる心配がなくて良き★
コース全体はこんな感じ

では、また次の記事でお会いしましょう ﾉｼ

Discussion