devlog

React UIコンポーネントライブラリのビルドを Vite (Library mode) へ変更した

2024-05-17

概要

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

モチベーション

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

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

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

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

  • 作成日
    2024-05-17
  • 更新日
    2024-05-17