Viteを軽く触ってみて分かった使い方とかメモ

Viteのinstall/設定ファイルの作成

ドキュメント通りにnpm create vite@latestで自分の作りたい環境からテンプレートを作って、そこからカスタマイズしてくのが楽そうだった。

ちなみに以下はTypeScript + Vue3のViteのbuildのconfigファイル、webpackに比べると非常にシンプル。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

Viteの開発build

開発用のbuildはnpm run viteで行う。実行するとwebpack-dev-server的なものが立ち上がりファイル修正時の自動ビルド、ホットリロードが実行される。体感的にはすごくサクサクだった。

Viteではプロジェクトのrootにindex.htmlを配置して、そこがデフォルトのエントリになる。

お気づきかもしれませんが、Vite プロジェクトでは index.html は public 内に隠れているのではなく、最も目立つ場所にあります。これは意図的なものです。開発中、Vite はサーバで、index.html はアプリケーションのエントリポイントです。はじめに | Vite

jsのエントリの読み込みはscript type="module"で、読み込みたいjsを読み込めばよい。 ※読み込むと自動的にエントリーになる。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    hello My index
    <div id="vue-root">
      <ts-counter></ts-counter>
      <js-counter></js-counter>
    </div>
    <script type="module" src="/src/javascripts/entries/index.js"></script>
  </body>
</html>

Viteの本番build

本番用のbuildはnpm run vite buildで実行される。この時に裏でRollupによって実行されるためbuild.rollupOptionsでこの時のオプションを色々修正できる。

ja.vitejs.dev

npm run vite previewを実行するとビルド結果をローカルで確認できる。

vite preview コマンドは、ローカルで静的なウェブサーバを起動し、dist のファイルを http://localhost:4173 で配信します。これは、プロダクションビルドが問題ないかどうかを自分のローカル環境で確認する簡単な方法です。 ja.vitejs.dev

その他Tips

build時にpublic/packsに出力したい

build.outDir、build.assetsDirをいじれば任意のパスにbuildできる。 manifestをtrueにすればmanifestも吐き出される。

  build: {
    manifest: true,
    outDir: "public",
    assetsDir: "packs",
  },

zenn.dev

レガシーブラウザへの対応

ViteはNative ESMをサポートしているブラウザ向けにビルドするので、サポートしてないブラウザでは動かない。レガシーブラウザへの対応は、@vitejs/plugin-legacyでできるっぽい。

babelとかcorejsに依存しているから、pluginを入れて設定いれるだけで自動的やってくれるっぽい。

Vite's default browser support baseline is Native ESM. This plugin provides support for legacy browsers that do not support native ESM when building for production. https://github.com/vitejs/vite/blob/main/packages/plugin-legacy/package.json

mpaにしたい(明示的にエントリーを指定したい)

rollupOptions.inputで任意のhtmlをentryに含めるようにすればいいっぽい。

vitejs.dev

mpaのoutputパスを任意のパスにしたい

Viteはwebpackみたいにentry単位にoutputを設定することは簡単にはできないっぽい。

You can't because vite build runs a single Rollup build. If you want multiple builds, have multiple vite config files and run vite build -c different.config.js https://github.com/vitejs/vite/issues/2039

jsとかcssとかだったらいいけど、root直下にhtmlをエントリーのhtmlをたくさん置きたくないので、 src/pages配下に置きたいけどoutputを修正できない。

またassetsDirとかでもいじれないから以下のようになってしまい/src/pagesみたいなパスでアクセスすることになる。。。

public
├── manifest.json
├── packs
│   ├── home.449f531d.css
│   ├── home.fe9aefcd.js
│   ├── index.9506a175.js
│   ├── index.95a8fec0.css
│   ├── jsCounter.434c301e.css
│   └── jsCounter.ad43c1b1.js
└── src
    └── pages
        ├── home.html
        ├── index.html
        └── sub
            └── index.html

vite-plugin-mpaを使うといい感じのpathにビルド後にbuildパスを書き換えてくれるっぽいが、 jsとhtmlを一緒のディレクトリに配置しないといけないっぽい。

github.com

このへんのコード

github.com

CSSの分割方法を調整したい

CSSの分割方法とかは、自動適用されるので無効化するか、提供されるものを使うかしかないっぽい？

ビルドの最適化以下にリストされている機能は、ビルドプロセスの一部として自動的に適用され、無効にする場合を除いて、明示的に構成する必要はありません。特徴 | Vite

参考

ics.media