Overview

ja.vitejs.dev
github.com/vitejs/vite

開発時には esbuild を、本番ビルドには rollup を使うバンドルツール
react, vue など ui library や typescript への対応もばっちり
とにかく早くて使いやすいとのこと
次世代 front ツールとして snowpack と比較されるが、今んとこシェアぶっちぎり

nextjs つかうなら内包されている webpack で十分だし、それ以外の node project で使うかはまだちょっとわからないけど、単純な SPA 作成なら parcel 代替で使えそうに見える。

Getting Started

最初の Vite プロジェクトを生成する

node v14.18 or v16 以上が必要
npm create で対話形式でプロジェクト新規作成できる
src/ にためたやつを dist/ に吐く一般的な構成
- public/ 配下はそのまま dist/* に吐かれる感じ
- assets/ とかは dist/assets/* って感じ
セットアップ後に eslint, jest あたりをいい感じにやればよさそう

$ npm create vite@latest

# project 名と framework で react, 言語で typescript を選ぶくらい

$ cd ${PROJECT_NAME}
$ npm i
$ npm run dev

出来上がる package.json のコマンドはこんな。

{
  "scripts": {
    "dev": "vite", // 開発サーバ --https や --host も使える
    "build": "vite build", // プロダクションビルド
    "preview": "vite preview" // プロダクションビルドをローカルでプレビュー
  }
}

あとは ...

index.html, tsconfig.json いじる
gitignore, editorconfig, gitattribute の追加・編集
husky, eslint, jest, ts-node など周辺ツール連携
vite の利用法に応じた plugin 追加や config 編集

... あたりのセットアップすればいいかな。

Config

Vite の設定
 github.com/vitejs/vite-plugin-basic-ssl
github.com/aleclarson/vite-tsconfig-paths

基本 vite.config.js に設定を書いていく。plugin を使う場合は別途 install する必要あるぽい。

# --https を使う際に自己証明書を自動生成するやつ
$ npm i -D @vitejs/plugin-basic-ssl

# tsconfig の baseUrl や paths を resolver に適用するやつ
$ npm i -D vite-tsconfig-paths

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import basicSsl from '@vitejs/plugin-basic-ssl' // 追加
import tsconfigPaths from 'vite-tsconfig-paths' // 追加

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 1234, // dev server port
  },
  preview: {
    port: 8080, // preview port
  },
  plugins: [
    react(),
    basicSsl(), // 追加
    tsconfigPaths(), // 追加
  ],
})

cacheDir

https://ja.vitejs.dev/config/shared-options.html#cachedir

# cache 削除
$ rm -rf node_modules/.vite

Features

ざっくり読んだほうがいいところ。

特徴
静的アセットの取り扱い
環境変数とモード
- process.env.NODE_ENV じゃなくて import.meta.env.MODE でみるという特殊な仕様
  - import.meta - developer.mozilla.org 意識ぽい
  - でも meta.env ってのは vite 独自っぽいかな？
- env.development.local とか、読み込み順序はよくある仕様
- VITE_* のみインライン化、あとは node でしか参照できない
- webpack も v5 から node polyfill 外しててこの辺議論が白熱してる
  - webpack/webpack#15833

Plugins

vite-plugin-environment

ElMassimo/vite-plugin-environment
env variables not accessible in vite.config.js #1930

SPA 作るだけなら .env を platform に吸わせた環境変数に応じて構成して全部 inline にして build ... としたい。

このとき、正直この next っぽい prefix による inline 挙動や vite 独自の import.meta.env みたいなのがコード流用できなくてすげー困る。

ので、いまのところ plugin 使って「 .env* を全部 inline にして process.env で触る」方針で回避してる。

この子は define を使って定義する関係上 process.env.HOGE みたいな文字列に対して inline で置換を行うだけ
↑ なので process.env に対して {} みたいなものを割り当ててるわけじゃないことに注意
背景とかはこの辺読むといい vitejs/vite#1973

$ npm i -D vite-plugin-environment

import { defineConfig } from 'vite'
import env from 'vite-plugin-environment'

export default defineConfig(({ mode }) => {
  process.env.NODE_ENV = mode
  const initialEnvKeys = Object.keys(process.env)
  const envFileKeys = Object
    .keys(loadEnv(mode, process.cwd(), ''))
    // 元々 node 側にある環境変数が入り込まないようにしている
    // amplify など ci 時には node 側 env の変数名と env file 側の変数名を
    // 別名にしておく必要があることに注意すること
    .filter(k => !initialEnvKeys.includes(k))

  return {
    plugins: [
      // ...
      env(
        // 現在 process.env からこの keys だけ抽出
        ['NODE_ENV', ...envFileKeys],
        // ↑ を globalThis の `process.env` へ割当
        { defineOn: 'process.env' },
      )
    ]
  }
})

# .env

# NG
#
# こんなふうに未定義にしていると env の第一引数の配列に入らず
# 結果的に process.env.HOGE に対する置換が行われないことに注意
#
# HOGE=''

# OK
#
# これなら KEY としては存在する状態で define に入るので ok
#
HOGE=

rollup/plugin-dsv

npmjs.com/package/@rollup/plugin-dsv
How do I import csv file? #8271

csv の parse > import をしたいなら rollup の plugin を使えとのこと。

$ npm i -D @rollup/plugin-dsv

import { defineConfig } from 'vite'
import dsv from '@rollup/plugin-dsv'

export default defineConfig({
  plugins: [
    // ...
    dsv(),
  ],
})

// @ts-ignore
import csv from './filmList.csv'

console.log(csv) // => [{'name':'Parasite','year':'2019'}]

yano3nora/vite.md