🐥

rollup.jsに爆速esbuildを組み込む方法

3 min read

rollup-plugin-esbuildでそれぞれのいいとこ取り

関連記事

Webpack嫌いには光の速さで消えて欲しい筆者にとって、
バンドラーはもっぱらrollup.jsだった。
プラグインの豊富さからありとあらゆる場面で活用していたのだが、
最近バンドラーのトレンドにビルド速度というのがあり、
ちょっと気になる今日この頃。

esbuildswcのようにGoやRustのようなハードウェアレイヤーの言語を使って、
ビルド実行をしてしまうアプローチ。
(緩募: 低レベル言語に変わる用語)
ネイティブ速度で動くわけでnodeで動く各種バンドラーでは歯が立たない。
まだesbuildは精度がーなんてのは最早過去の話。
1軍で活用されているようだ。

viteParcelv2はビルドエンジンにesbuildswcを使っているので、
rollup.jsでもできないと探してみたら良いものがあった。
それは

rollup-plugin-esbuild

rollup.jsの使い勝手とesbuildのビルド速度を良いとこ取りできそうだ。

当然だけどNode.js入ってる前提。
適当に検索して使えるようにしておいて。

ヾ(・ω<)ノ" 三三三● ⅱⅲ コロコロ♪

------------------- ↓ 本題はここから ↓-------------------

TypeScriptベースのSvelteプロジェクトを作成

もはやTypeScriptは当たり前で、
ReactかVueを使うのも普通すぎる。
だが、Svelte推しなので。

npx degit sveltejs/template rollup-esbuild
cd rollup-esbuild
node ./scripts/setupTypeScript.js
npx npm-check-updates -u
npm i -D esbuild rollup-plugin-esbuild
npm run dev

ページを確認しておく
\http://localhost:5000

はろー世界
esbuild導入前

(^_^)V はろー世界

rollup.config.jsを変更

以下に該当するプラグイン記述を置き換える

  • rollup-plugin-typescript2
  • @rollup/plugin-typescript
  • rollup-plugin-terser

今回だと@rollup/plugin-typescriptrollup-plugin-terserになる

./rollup.config.js
import livereload from 'rollup-plugin-livereload';
- import { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
- import typescript from '@rollup/plugin-typescript';
import css from 'rollup-plugin-css-only';
+ import esbuild from 'rollup-plugin-esbuild'

const production = !process.env.ROLLUP_WATCH;
・・・
  commonjs(),
- typescript({
-   sourceMap: !production,
-   inlineSources: !production
- }),
+ esbuild({
+   sourceMap: !production,
+   minify: production,
+ }),
// In dev mode, call `npm run start` once
// the bundle has been generated
・・・
// If we're building for production (npm run build
// instead of npm run dev), minify
- production && terser()
],

オプションはお好みで。

見づらいので全文はこちら

https://gist.github.com/dohzoh/3a55832946d64ab30c27921690e7a090

動作確認

改めてページを確認しておく
\http://localhost:5000

はろー世界
esbuild導入後

何も変化無く、きちんとビルドされてることが確認できる。

(・∀・) これからは主力にしよう

Discussion

ログインするとコメントできます