個人開発のvite pluginのバンドラーをrollupからrolldownへ移行してみたので手順をメモ📝

これまでTypeScript製のライブラリ開発でRollupを使っていたが、最近話題のrolldownへビルドツールを移行したので、その手順やハマりどころをメモしておく。

変更内容の概要

移行にあたって主に以下のようなことを実施した。

• Rollup関連の依存パッケージ（@rollup/plugin-commonjsやrollup-plugin-dtsなど）を削除し、rolldownとrolldown-plugin-dtsに置き換えた。
• rollup.config.jsを削除し、rolldown.config.tsを新規作成。
• package.jsonのbuildスクリプトをrolldown --config rolldown.config.tsに変更。
• pnpm-lock.yamlも依存関係の変更に伴い更新。

差分の全量に関しては以下のcommitを参照してください。

github.com

変更後のrolldown.config.ts

-import commonjs from "@rollup/plugin-commonjs";
-import replace from "@rollup/plugin-replace";
-import typescript from "@rollup/plugin-typescript";
-import { dts } from "rollup-plugin-dts";
+import { defineConfig } from "rolldown";
+import { dts } from "rolldown-plugin-dts";
 
-export default [
+export default defineConfig([
   {
     input: "src/index.ts",
     external: ["node:fs", "node:path"],
+    define: {
+      "import.meta.vitest": "undefined",
+    },
     output: [
       {
         format: "es",
         exports: "auto",
       },
     ],
-    plugins: [
-      replace({
-        "import.meta.vitest": "undefined",
-        preventAssignment: true,
-      }),
-      typescript(),
-      commonjs(),
-    ],
   },
   {
     input: "src/index.ts",
-    output: [{ format: "es", file: "dist/index.d.ts" }],
-    plugins: [dts()],
+    external: ["node:fs", "node:path"],
+    output: [{ format: "es", dir: "dist" }],
+    plugins: [dts({ emitDtsOnly: true })],
   },
-];

• Rolldownは@rollup/plugin-commonjs相当の機能が搭載されているので不要になった。
  • https://rolldown.rs/guide/features#esm-cjs-interop
• Rollupの@rollup/plugin-replaceプラグインでやっていたimport.meta.vitestの置換は、rolldownのdefineオプションで簡単に書けるようになった。
  • https://rolldown.rs/guide/features#define
• 型定義ファイル（d.ts）の出力もrolldown-plugin-dtsで対応可能。
  • https://github.com/rolldown-rs/rolldown-plugin-dts
  • emitDtsOnly: trueを指定しないと、不要なjsファイルも出力されてしまうので注意。
  • optputのオプションの指定がfileではなくdirになっているので注意

所感

公式ドキュメントもまだ発展途上な印象があるが、基本的なビルド用途ならすぐに移行でき、rollupに比べて標準で色々サポートされているのでpackage.jsonもシンプルに出来る点は良いなと思った⚡️

小さなライブラリなので、そこまで大きな変化は無いが移行前後でビルド速度が速くなった🐰✨

before

$ rollup --config

src/index.ts → dist/index.esm.js, dist/index.umd.cjs...
created dist/index.esm.js, dist/index.umd.cjs in 1.7s

src/index.ts → dist/index.d.ts...
created dist/index.d.ts in 678ms

after

$ rolldown --config rolldown.config.ts

[log] <DIR>/index.esm.js.map  asset │ size: 12.08 kB
[log] <DIR>/index.esm.js      chunk │ size:  5.09 kB
[log] <DIR>/index.umd.cjs.map  asset │ size: 12.11 kB
[log] <DIR>/index.umd.cjs      chunk │ size:  6.15 kB
[log] <DIR>/index.d.ts  chunk │ size: 0.51 kB
[log]
[success] Finished in 1.18 s

参考

rolldown.rs

github.com