Viteをライブラリモードでビルドできるようにする

Viteにはライブラリモードというビルドモードがあるので、モノレポ構成時に使えないかと思って調べてみました。コンポーネントライブラリを作成するときに使って行きたいです。

ライブラリモードの方法を記事にしていきたいと思います。

Viteのプロジェクトを用意する

npm create vite@latest -- --template react-swc-ts

Viteのコンフィグファイルを編集する

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build:{
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'index',
      fileName: 'index',
    },
    cssCodeSplit: true,
    sourcemap: true,
    emptyOutDir: false,
    rollupOptions: {
      external: ['react'],
      output: {
        globals: {
          react: 'React',
        },
      }
    }
  }
})

tsconfig.jsonを編集する

以下の設定を追加します。

tsconfig.json

{
  "emitDeclarationOnly": true,
  "declaration": true,
  "declarationDir": "./dist/types",
  "declarationMap": true,
  "noEmitOnError": true,
}

package.jsonを編集する

scriptsのbuildはtscを後にすることで型のファイルがvite buildで消されないようにしています。

package.json

{
  "main": "./dist/index.umd.cjs",
  "module": "./dist/index.js",
  "types": "./dist/types/index.d.ts",
  "files": [
    "dist"
  ],
  "exports": {
    ".": {
      "types": "./dist/types/index.d.ts",
      "import": "./dist/index.js",
      "require": "./dist/index.umd.cjs"
    }
  },
  "scripts": {
    "build": "vite build && tsc",
  }
  "peerDependencies": {
    "react": "^18.2.0"
  }
}

以上で設定完了です!