unjs/unbuildに入門してみた - くらげになりたい。

pnpm workspace+TypeScriptなmonorepoで、
Cloud Functions for Firebaseを開発していたときに、
unjs/unbuildでビルドしてみたときの備忘録(*´ω｀*)

少ない設定でビルドができて便利(*´ω｀*)

unbuildとは

unjs/unbuild: 📦 A unified JavaScript build system

「A unified JavaScript build system」らしい。
Viteがフロントエンド用のビルドに対し、
unbuildはライブラリなどによさそうな印象

少ない設定でESM/commonjs+型定義を生成できる
package.jsonからビルド設定を自動で取得
package.jsonの設定やdependenciesの過不足を自動チェック

ビルドする方法は2つあり、rollupとmkdistを使っている

rollup: 複数のファイルを1つにまとめる(バンドル)
- importしてるファイルを1つにまとめてくれる
- dependenciesに指定されているものはそのまま利用する
- devDependenciesに指定されてるものはバンドルしてくれる
mkdist: バンドルしないシンプルなトランスパイル
- ディレクトリ構造そのままに、ファイルごとにトランスパイルしてくれる

なので、monorepoの共通プロジェクトも、
rollupを使って、devDependenciesに指定しておけば、
全部バンドルしてくれるので、だいぶ便利に(*´ω｀*)

シンプルな使い方

READMEに書かれているのはこんな感じ。

src/index.tsにファイルを用意して、

// src/index.tsexportconst log = (...args)=>{console.log(...args);
};

package.jsonに設定を追加して、

// package.json{"type": "module",
  "exports": {".": {"import": "./dist/index.mjs",
      "require": "./dist/index.cjs"
    }},
  "main": "./dist/index.cjs",
  "types": "./dist/index.d.ts",
  "files": ["dist"]}

コマンドを実行すればOK

$ npx unbuild

すると、こんな感じに作成してくれる。

./dist/
├── index.cjs
├── index.d.cts
├── index.d.mts
├── index.d.ts
└── index.mjs

設定ファイル

build.config.tsを使って細かい設定ができる

import{ defineBuildConfig }from"unbuild";

exportdefault defineBuildConfig({// ビルドするファイルは、entriesで指定するentries: [// ファイルを指定すると、rollupでビルド"./src/index",
    
    // ディレクトリを指定すると、mkdistでファイルごとのトランスパイル{builder: "mkdist",
      input: "./src/package/components/",
      outDir: "./dist/components",
    },
  ],

  // 型定義ファイル(.d.ts)を生成する場合は、trueにするdeclaration: true,
  
  // waringのときでもエラーにしない場合は、falseにするfailOnWarn: false,
});

entries.builderは、特は指定なければ、

ファイル(末尾が"/"でなない)場合は、rollup
ディレクトリ(末尾が"/")の場合は、mkdist

が利用されるよう

cjsを出力する

build.config.tsを利用する場合、
デフォルトでは.cjsが出力されない。

rollupとmkdirでは設定の仕方が異なる

rollup

import{ defineBuildConfig }from"unbuild";

exportdefault defineBuildConfig({entries: [{builder: "rollup"input: "./src/index",
      outDir: "./dist",
    },
  ],

  // rollupの場合は、ここで設定rollup: {emitCJS: true,
  },
});

mkdist

mkdistの場合は、entiresでそれぞれ指定する

import{ defineBuildConfig }from"unbuild";

exportdefault defineBuildConfig({entries: [{builder: "mkdist",
      input: "./src/package/components/",
      outDir: "./dist/components",
    },
    {builder: "mkdist",
      input: "./src/package/components/",
      outDir: "./dist/components",
      format: "cjs", // commonjs形式を指定ext: "cjs", // 拡張子を指定しないと、jsになる},
  ],
});

minifyする

なにもしてしないとminifyされないので、
個別に指定する必要がある。

rollup

import{ defineBuildConfig }from"unbuild";

exportdefault defineBuildConfig({entries: [{builder: "rollup"input: "./src/index",
      outDir: "./dist",
    },
  ],

  // rollupの場合は、ここで設定rollup: {esbuild: {minify: true,
    }},
});

mkdist

mkdistの場合は、entiresで指定する

import{ defineBuildConfig }from"unbuild";

exportdefault defineBuildConfig({entries: [{builder: "mkdist",
      input: "./src/package/components/",
      outDir: "./dist/components",
      esbuild: {minify: true,
      },
    },
  ],
});

特定の文字列を置き換える

一部の文字列や変数などをビルド時に置き換えたい場合

rollup

import{ defineBuildConfig }from"unbuild";

exportdefault defineBuildConfig({entries: [{builder: "rollup"input: "./src/index",
      outDir: "./dist",
    },
  ],

  // rollupの場合はここ(@rollup/plugin-replaceで置き換え)replace: {"process.env.FOO": `"bar"`,
  },
  // or rollup: {// esbuildのdefineで置き換えるesbuild: {define: {"process.env.FOO": `"bar"`,
      }}},
});

mkdist

mkdistの場合は、entiresで指定する

import{ defineBuildConfig }from"unbuild";

exportdefault defineBuildConfig({entries: [{builder: "mkdist",
      input: "./src/package/components/",
      outDir: "./dist/components",
      // esbuildのdefineで置き換えるesbuild: {define: {"process.env.FOO": `"bar"`,
        }},
    },
  ],
});

以上!! 少ない設定でバンドルあり/なしでビルドできて便利...(*´ω｀*)