コーディングやフロントエンド開発のプロジェクトではこれまでずっとwebpackを使った開発環境を使っていましたが、PugやJSXなどで作成したコンポーネントが多くなってくるとどうしてビルド時間がストレスになったり、メモリ消費も大きくなってきたこともあり、Viteへ移行することにしました。今回はViteの導入とTypeScriptコンパイルの対応についてまとめていきたいと思います。   Viteについては以前からずっと知っていたのですが、プロジェクトの進行などの都合でなかなか取り組めずにいました。なので今更という感じではありますが、、とりあえず落ち着いたタイミングで本格的に環境周りを整えていきました。従来の環境でもまだまだ対応できるところもあるのですが、良いツールはどんどん活用していくのがベストですからね。    

開発環境へViteのインストール

開発環境にViteを導入するといっても、基本的にはコマンドを入力するだけで揃ってしまいます。npmやyarnで下記のようにViteを使った新規プロジェクトを作成していきます。この辺りはVueCLIやReactのcreate-appに似ていますね。

// npm
$ npm create vite@latest

// yarn
$ yarn create vite

  コマンドを実行すると対話形式でプロジェクトの設定をしていきます。まずは、フレームワークの指定ですが、使用するフレームワークが決まっている場合にはこのタイミングで設定しておくと良いですね。特にフレームワークを使わないなら「Vanilla」を選択します。そして次の質問では言語を選択しますが、「TypeScript」の項目を選択するだけでコンパイル環境などが全て揃うようになります。これはとても簡単ですね。

? Project name: › PROJECT_NAME
? Select a framework: ›
❯ Vanilla
  Vue
  React
  Preact
  Lit
  Svelte
  Others
? Select a variant: ›
  JavaScript
❯ TypeScript

  プロジェクトの設定が終わって先に進めるとViteの環境構築を行なっていきます。設定が完了すると必要なモジュールをプロジェクトフォルダ内でインストールし、ローカルサーバー起動のコマンドを実行すると、初期画面が表示できるようになります。

.....
Done. Now run:
  cd PROJECT_NAME
  npm install
  npm run dev

  他にも、本番用のコードをビルドするコマンドや、本番用のコードをプレビューできるコマンドなどもデフォルトで用意されているようですね。

// 開発用サーバー起動
$ npm run dev

// 本番用ビルド
$ npm run build

// 本番用ビルドをローカルサーバーで確認
$ npm run preview

  Viteではデフォルトで下記のようなディレクトリ構成になります。また、ビルド後のファイル名にはハッシュ値が自動的に付けられます。設定によってプロジェクトのルートや出力先のフォルダ名なども変更できるようですね、この辺りは後ほど詳しくみていきます。Viteではindex.htmlファイルがある場所がドキュメントルートとされるので、ウェブサーバーと同じようなイメージですとわかりやすいですね。

dist
  ┣ assets
    ┣ index-<hash>.js
    ┣ index-<hash>.css
    ┗ sample-<hash>.svg
  ┣ index.html
  ┗ photo.jpg
src
  ┣ main.ts
  ┣ style.css
  ┗ sample.svg
public
  ┗ photo.jpg
index.html
tsconfig.json
..... その他設定ファイル、スクリプトのモジュールなど

  Viteのプロジェクトで扱う基本となる主なディレクトリは下記のようになります。これらはディレクトリ名と共に後述するViteの設定ファイルで変更することができます。  

dist	ビルド後のファイルが格納されるディレクトリで、リソースファイルなどはassetsディレクトリに格納されます。
src	ビルド前のソースコードが格納されるディレクトリ、このディレクトリ配下のファイルがコンパイルの対象になります。
public	ビルドを通さない静的アセットファイルを格納するディレクトリ、この配下のファイルはdistディレクトリにそのままコピーされて格納されます。

  VIteの新規プロジェクト作成時にTypeScriptに対応させていると、TypeScriptの設定ファイルも自動的に用意されています。これも非常に助かりますね。 【tsconfig.json】

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ESNext", "DOM"],
    "moduleResolution": "Node",
    "strict": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

   

Viteプロジェクトでの設定

Viteでは上記の内容がデフォルトの構成になりますが、設定ファイルである「vite.config.js」ファイルを作成し、そのファイル内にオプションで設定することでさまざまなカスタマイズができるようになります。デフォルトでは用意されていないので、設定ファイルを新規作成するところからスタートです。プロジェクトのルートに設定ファイルを用意します。

$ cd PROJECT_NAME
$ touch vite.config.js

  設定ファイルが作成できたら、下記のように「defineConfig()」を使って、オプションごとのキーで細かく設定していきます。詳しくは公式サイトにリファレンスとしてまとめられていますので、そちらを参照してみてください。 【vite.config.js】

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    .....
  },
  build: {
    .....
  }
});

  実務で使う場合にはデフォルトの設定だと使いにくいところもあるので、具体的なケースごとに設定例をまとめてみます。   1.公開時のベースディレクトリ指定 「base」オプションでは公開時のディレクトリを指定することができます。Viteではドキュメントルートでの使用を前提としているため、サブディレクトリなどで公開する場合にはパスが合わなくなるということがあります。また、参照するパスもドキュメントルートを基準としたルートパスになるので、相対パスで扱いたい時にもこの設定で対応します。

// https://example.com/sub-dir/ のURLでサブディレクトリ配下にてアプリを公開する場合
base: '/sub-dir/',

// 公開時にassetsのファイルを相対パスで参照したい場合
base: './',

  2.ビルドファイルのリネーム ビルド後のファイル名にはデフォルトでハッシュ値が含まれてしまいます、これらも不要な場合には「build.rollupOptions.output」でビルドファイルに関する設定が細かくできるようになります。下記のようにあらかじめビルドファイルに関するフォーマットを決めておくことで、それに合わせてファイルが生成されるようになります。もちろん出力先ディレクトリも調整できます。

.....
build: {
  rollupOptions: {
    output: {
      entryFileNames: 'assets/scripts/main.min.js',
      assetFileNames: 'assets/[name].min.[ext]'
    }
  }
},
.....

  3.ビルドファイルの条件分岐など詳細設定 デフォルトの設定ですとファイルごとにビルド後の出力先ディレクトリを分けることができないため、こちらもオプションで設定していきます。ファイル名に含まれる拡張子によって条件分岐させていきます。下記ではスタイルシート、画像、フォントファイルでビルド後のディレクトリを振り分けている設定例になります。

.....
build: {
  rollupOptions: {
    output: {
      entryFileNames: 'assets/scripts/[name].min.js',
      chunkFileNames: 'assets/scripts/[name].min.js',
      assetFileNames: (assetFile) => {
        if(/\.css$/.test(assetFile.name)) {
          return 'assets/stylesheets/[name].min.[ext]';
        } else if(/\.( gif|jpeg|jpg|png|svg|webp| )$/.test(assetFile.name)) {
          return 'assets/images/[name].min.[ext]';
        } else if(/\.( ttf|otf|eot|woff|woff2| )$/.test(assetFile.name)) {
          return 'assets/fonts/[name].[ext]';
        } else {
          return 'assets/[name].[ext]';
        }
      } 
    }
  }
},
.....

  先ほどのファイルリネームと合わせたこの設定でビルド後のファイル、ディレクトリ構成は下記のようになります。この形にしておくと、静的サイトとしてサイトデータを一式まとめて納品しやすくなりますね。

dist //ビルド後のファイルが入るディレクトリ
  ┣ assets
    ┣ scripts
      ┗ main.min.js
    ┣ stylesheets
      ┗ style.min.css
    ┣ images
      ┗ sample.min.svg
    ┗ fonts
      ┗ font.woff2
  ┣ .....
src //ビルド前のソースコードが入るディレクトリ
  ┣ ts 
    ┗ main.ts
  ┣ css
    ┗ style.css
  ┣ img
    ┗ sample.svg
  ┗ font
    ┗ font.woff2

  4.複数ページ・ビルドファイルの対応 ページが複数にわたるケースや、複数のJSファイルなどをバンドルせずに個別にビルドする時には、「build.rollupOptions.input」のオプションでそれぞれキーバリューの形で個別にエントリーポイントとなるファイルを指定します。この時キーの値はビルド後のファイル名になるように紐づけておくことで、複数ファイルのビルドに対応できるようにします。

import { resolve } from 'path';
import { defineConfig } from 'vite';
export default defineConfig({
  .....
  build: {
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'index.html'),
        page1: resolve(__dirname, 'page1.html'),
        page2: resolve(__dirname, 'page2.html'),
        page3: resolve(__dirname, 'page3.html'),
        main: resolve(__dirname, 'main.ts'),
        sub: resolve(__dirname, 'sub.ts'),
        .....
      },
      output: {
        entryFileNames: 'assets/scripts/[name].min.js',
        .....
      }
    }
  }
  .....
});

  5. ディレクトリ構成の変更 ディレクトリ構成なども実案件の要件に合わせて変更したい場合があると思います。設定ファイルを使うことで、ソースコードのルートディレクトリや、静的配信ファイルの場所などもソースコード側のディレクトリにまとめることができます。今回はビルド後に下記のような構成にする例を見ていきます。

dist //ビルド後のファイルが入るディレクトリ
  ┣ assets
    ┣ scripts
      ┣ index.min.js
      ┣ page1.min.js
      ┗ page2.min.js
    ┣ stylesheets
      ┗ style.min.css
    ┣ images
      ┗ sample.min.svg
    ┣ .....
    ┣ index.html
    ┣ page1.html
    ┣ page2.html
    ┗ photo.jpg
src //ビルド前のソースコードが入るディレクトリ
  ┣ js 
    ┗ main.js
  ┣ css
    ┗ style.css
  ┣ img
    ┗ sample.svg
  ┣ public //静的に配信するアセットファイルが入るディレクトリ
    ┗ photo.jpg
  ┣ index.html
  ┣ page1.html
  ┗ page2.html

  上記のような構成にするために、先述の設定に加えて「root」オプションでソースコード側のドキュメントルートを、「publicDir」オプションで静的配信用ファイルのディレクトリをそれぞれ変更しています。デフォルトの構成と比べてもかなりすっきりとしている印象ですね。

.....
root: 'src',
base: './',
publicDir: resolve(__dirname, 'src/public'),
build: {
  outDir: resolve(__dirname, 'dist'),
  emptyOutDir: true,
  assetsDir: 'assets',
  rollupOptions: {
    input: {
      .....
    },
    output: {
      .....
    }
  }
},
.....

   

jQueryなどライブラリを使ってみる

Viteを使うことでサイト制作に必要なリソースと開発環境が簡単に準備できました。実務ではライブラリなども併用することもあると思います。試しに、jQueryを使ってみます。まずはライブラリ本体と、型定義のファイルをインストールしていきます。

$ npm install jquery
$ npm install --save-dev @types/jquery

  インストールしたライブラリをスクリプト側で実行してみると、正しく読み込めていることが確認できますね。 【src/main.ts】

import $ from 'jquery';

$(function() {
  ....
});

  Viteでは1つのコマンドで環境構築が完了し、いろんな設定も設定ファイル内のオプションで指定していく形なので、とても簡単にカスタマイズできる印象ですね。またビルド時間もかなり早く、コーディングがフロントエンドの開発もとてもスムーズで快適に進められます。他にもSassなどのプリプロフェッサーを導入したり、各種フレームワークを使うことも簡単ですので、また別記事でまとめてみたいと思います。   （参考にさせていただいたサイト） Viteの設定 Viteで始めるモダンで高速な開発環境構築