はじめに

前回ビルドツールについてまとめました。
今回はViteで使う設定ファイル(vite.config.ts)を中心に、設定ファイルについてまとめます。

defineConfig を使ったVite設定の基本

Viteの設定ファイルは通常、プロジェクトルートに vite.config.ts として配置されます。
以下中身の一例です。

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { resolve } from 'path';

export default defineConfig({
  server: {
    hmr: {
      host: 'localhost',
      port: 3000,
      protocol: 'ws',
    },
  },
  build: {
    sourcemap: true, // ソースマップを生成
  },
  plugins: [
    react(),
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
});

設定できる値に関しては、公式ドキュメントを参考にいただければです。

ja.vite.dev

defineConfig を使うメリットは以下の通りです

型安全性
設定を記述する時に自動補完サポート
公式との一貫性：React・Vue・Angular・Svelteはプラグインとしてサポートされている

vitest

Viteを使用している場合、多くはテストフレームワークにVitestを採用してるんじゃないかなと思います。
Vitestは、専用の設定ファイル vitest.config.ts を使います。

import { defineConfig } from 'vite';
import viteConfig from './vite.config';

export default defineConfig({
  test: {
    include: ['test/**/*.{test,spec}.{js,ts,jsx,tsx}'],
    environment: 'jsdom',
  },
});

テスト設定を vite.config.ts に統合するケースもあります。
現在のプロジェクトではまとめています。

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react-swc';
import { resolve } from 'path';

export default defineConfig({
  server: {
    hmr: {
      host: 'localhost',
      port: 3000,
      protocol: 'ws',
    },
  },
  build: {
    sourcemap: true,
  },
  plugins: [
    react(),
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  test: {
    include: ['test/**/*.{test,spec}.{js,ts,jsx,tsx}'],
  },
});

設定を1つにまとめることで、管理がシンプルになり、開発とテストの一貫性が保てます。

webpackの場合どうなる？

webpackとViteを比較してみます。

Vite設定項目	Webpackでの対応場所
`plugins: [react()]`	`module.rules` で好みのloader設定
`resolve.alias`	`resolve.alias`
`server.hmr`	Webpack Dev Server (`devServer`)
`build.sourcemap`	`devtool: 'source-map'`
`test`	Webpackには組み込まれていないため、別途Jestなどを設定

以下は一例です。

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/main.jsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  devServer: {
    hot: true,
    port: 3000,
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        loader: 'esbuild-loader',
        options: {
          loader: 'tsx',
          target: 'es2017',
          minify: false,
        },
      },
};

angular.jsonの場合どうなる？

angular.jsonとViteを比較してみます。

Vite設定項目	Angularでの設定箇所
`server.port`	`serve.options.port`
`build.outDir`	`architect.build.options.outputPath`
`resolve.alias`	`tsconfig.json` の `paths`
`sourcemap: true`	`architect.build.options.sourceMap`
`plugins`	CLIにはプラグイン概念が薄く、ビルドツール自体の拡張は難しい

一部を抜粋

// angular.json
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist",
            "sourceMap": true
          }
        },
        "serve": {
          "options": {
            "port": 3000
          }
        }
      }
    }
  }
}