現状どれくらい動くんだろうという疑問のもと検証

https://rolldown.rs/guide/

作業リポジトリはこちら

https://github.com/tocomi/rolldown-sandbox

インストール

適当にフォルダを作ったのち

pnpm init
pnpm add -D rolldown

とりあえずビルド

バンドル対象

// src/index.js
import { hello } from './hello.js'

hello()

// src/hello.js
export function hello() {
  console.log('Hello Rolldown!')
}

コマンド

./node_modules/.bin/rolldown src/index.js --file dist/bundle.js

動作確認

> node dist/bundle.js 
Hello Rolldown!

config の設定

rolldown.config.js[ts] に記載する

import { defineConfig } from 'rolldown'

export default defineConfig({
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
  },
})

読み込み

-c コマンドを使うと config ファイルを指定できる。何も指定しないと rolldown.config.js が読まれる。

package.json に type: module を指定しないとエラーが出た。

(node:21744) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

config ファイルの ts 化

rolldown.config.ts にファイルを変えるだけで OK

typescript を pnpm add していなくても実行できた🤔

ts 対応

pnpm add -D typescript
pnpm tsc --init

さっき作ったファイルを ts にして、型注釈とか付けてみる

特に設定しなくても ts ファイルをバンドルしてくれた！設定不要？

React 対応

pnpm add react react-dom
pnpm add -D @types/react @types/react-dom

tsconfig の変更

{
  ...
+ "jsx": "preserve",
+ "moduleResolution": "bundler",
  ...
}

devServer の起動

サンプルを参考に

pnpm add -D @rolldown/test-dev-server

と思ったけど、サンプルで使われている @rolldown/test-dev-server は workspace 内で定義されたもので、npm にはまだ publish されていないみたい。

正式名称は rolldown-dev-server だけど、まだ開発段階だからこの名前で呼ばれているみたい。

@rolldown/test-dev-server の部分だけサンプルから引っこ抜いてきて、微調整してたらアプリを起動するところまではできた。でも HMR とかは効かない🥲

バンドル

react のよくあるサンプルみたいなのを適当に作って、 rolldown.config.ts の input を react のエントリポイントにしたらそれだけでビルドは成功した！

デフォルトで jsx の parser が有効になっているみたい

import { defineConfig } from 'rolldown'

export default defineConfig({
  input: 'src/main.tsx',
  output: {
    file: 'dist/bundle.js',
  },
})

dist/bundle.js を読み込む index.html を作成して npx http-server コマンドで serve したところ動作も確認できた🙆‍♂️

optimization

今の状態だとまったく optimization が効いていないので設定してみる

output.minify を true にしたら minify は効いたが、まだ本番運用には推奨できないよって warning 出てきた。

The built-in minifier is still under development. Setting "minify: true" is not recommended for production use.