概要

• ReactでUIコンポーネントライブラリを開発してます
• これまで esbuild でビルドしていたのですが Vite Library mode でビルドする方式へ変更しました
• esbuild と Vite とでオプションに差異があり、移行に手間取ったのでメモを残します

モチベーション

そもそも Vite Library mode へ切り替える目的は、依存パッケージを少なくするためです。

UIコンポーネントライブラリの開発に際して「Viteは不要」だと思い esbuild でビルドしていたのですが、 開発を進めるうちに Storybook の便利さにあやかりたく Vite を入れてしまいました。

その結果、だんだん esbuild や Vite のプラグインが増えていき、また「似たような振る舞いをするプラグインを双方にあてる」という、管理が煩雑な状態になっていきました。

Vite Library mode を知り、ビルドを置き換えられそうと分かったので、移行に思い至りました。

esbuild のビルドファイル

切り替え前のビルドファイルです

build.ts
import esbuild from 'esbuild'
import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin'

await esbuild.build({
  bundle: true,
  entryPoints: [
    './src/index.ts',
  ],
  external: ['react', 'react-dom'],
  plugins: [vanillaExtractPlugin()],
  outdir: './dist',
  format: 'esm',
})

ビルドの際は、このファイルを実行します。また tsc で型ファイルを生成します。

package.json
  "scripts": {
    "build": "tsx build.ts && tsc",

Vite のビルドファイル

切り替え後のビルドファイルです

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
import { resolve } from 'node:path'

export default defineConfig({
  plugins: [
    react(),
    vanillaExtractPlugin(),
  ],
  build: {
    emptyOutDir: false,
    // Library mode
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      fileName: 'index',
      formats: ['es'],
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
    },
    commonjsOptions: {
      strictRequires: true,
    },
  },
})

ビルドの際は vite build を実行します。また tsc で型ファイルを生成します

package.json
  "scripts": {
    "build": "vite build && tsc",

補足

ライブラリによってビルド時の設定は変わると思います。

私の場合は CommonJS の設定値の調整に手間取り、Next.js の Hydration Error とにらめっこして strictRequires を true にすることで、ようやく動くようになりました。

Links

• commonjsOptions