Rollupについて学ぶ

Rollup では最新の ESM 形式で記述されたコードを、既存の CommonJS や AMD, IIFE などのスタイルに変換することが可能です。これは開発者視点では ESM にのみ関心を払えばよい という事になります。

コマンドラインインターフェースとJavaScriptAPIはたいへんそうなのでスキップ

Tutorial

voltaでrollupコマンドをインストールして試しにやってみる
チュートリアルわかりやすすぎて書くことがない

プラグイン

• BabelやJSONを扱うなどを使用するにはプラグイン機能を使う
  • Awesome Rollup
• rollup.config.mjsのpluginに記載するだけ

出力用プラグイン

• Rollupの解析が終わった後に適用されるプラグイン
  • 詳細Build Hooks
    • めちゃくちゃ詳細に処理の流れが書いてあるので、読んだら面白そう
• ミニファイとか

コード分割

webpackと似たようなことができる

ES Module Syntax

• めちゃくちゃまとまっててよかった
• 一番最後のlive bindingsは知らなかった
  • 単純にバンドルされて一つのスコープの中にあるから値が更新される、みたいな解釈でよい？
  • それともファイルが分割された状態でも参照を見にいくってことなんだろうか

よくある質問

Tree shakingってなに

• AST由来で、不要コードを削除する
  • Tree-shaking versus dead code elimination
  • Rich Harrisが作ってたのかこれ
    • 不要コード削除ではなく、必要なコードだけを集めて構築するみたいな理念っぽい
• Rollup は本質的には Node とブラウザの両方におけるネイティブ モジュール ローダーの一種のポリフィルらしい

トラブルシューティング

流し読み

• evalについて
• Tree shakingできない場合について

その他

• With NPM Packages
  • ESMとして公開されてるライブラリは、nodeで動かそうとすると動かないことがある
  • それを解決する方法について
• Babel
  • @rollup/plugin-babelを使えばよいらしい