Viteについて-テストコード学習１本目

このブログ記事は、テストフレームワークを学ぶ過程で執筆した記事の第一回です。

概要

Viteの基本やglobインポート機能、開発及びSSRサポート機能について記載しています。

Viteについて

ViteはJavaScript プロジェクト向けの、高速で設定不要なビルドツールですが、glob importsやSSRの基本機能や多くのプラグインが存在するなど、素晴らしいエコシステムを形成しています。

glob インポートとは

glob インポートは、 import.meta.glob() 関数を使用して複数のファイルを一度に動的にインポートできる機能です。

// 例: components ディレクトリ内の全ての .vue ファイルをインポート
const components = import.meta.glob('./components/*.vue')

//例として以下のオブジェクトがインポートされます。
// {
//   './components/Button.vue': () => import('./components/Button.vue'),
//   './components/Card.vue': () => import('./components/Card.vue'),
//   './components/Modal.vue': () => import('./components/Modal.vue')
// }

// 使用例
for (const path in components) {
  components[path]().then((module) => {
    // モジュールごとの処理
    console.log(path, module)
  })
}

Viteにおける開発時全般やSSRをサポートする機能

1. ホットモジュールリプレイスメント(HMR):開発中にアプリケーションの実行状態を維持したまま、変更されたモジュールだけを動的に置き換える
2. マニフェスト：ソースコード内の各モジュールとそれに対応するビルド後のアセットの関係を記載したファイルを作成する機能。作成されたマニフェストを基に、 タグが動的に作られ効率的にクライアントに事前読み込みさせます。
3. ネイティブのES Modules:webpackのバンドルとは違い、最新のブラウザが標準でサポートする ES Modulesを利用しているので、ビルドの時間が高速。
4. 低レベルのプリミティブを提供し、その上にVue、React、Svelteなど各フレームワーク固有のSSRロジックを構築できる
5. SSR専用のAPI：Viteは、サーバーとクライアントのコードを区別するのに役立つAPIを提供します

参考記事:https://vitest.dev/guide/why.html

・npm trendにおけるgulp,vite,webpackの比較