rollup.js でバンドルするハローワールド

rollup.js でバンドルするハローワールド

September 15, 2025

rollup.js は JavaScript のモジュールバンドラです。今回始めて利用したので、ハローワールド的な内容でメモを残しておきます。

１．ファイルを準備する #

ディレクトリ構成 #

以下の構成となるよう、４つのファイルを作成していきます。

my-rollup/
├ package.json
├ rollup.config.js
└ src/
  ├ cow.js
  └ main.js

ファイル内容 #

package.json #

いわずもがな。パッケージの設定と必要な依存関係を記述しています。今回の例では cowsay という外部ライブラリを利用しています。bundle コマンドで rollup.js を実行するようにしています。-c はコンフィグファイルの内容に基づいてバンドルせよというオプション指定です。

{
  "name": "my-rollup",
  "type": "module",
  "scripts": {
    "bundle": "rollup -c"
  },
  "dependencies": {
    "cowsay": "^1.0.0"
  },
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^16.0.0",
    "rollup": "^4.0.0"
  }
}

rollup.config.js #

rollup.js の設定ファイルです。@rollup/plugin-node-resolve プラグインを利用することで node_modules 内のモジュールを解決できるようになります。外部ライブラリ（cowsay）をバンドルに含めるために必要な設定です。

import { nodeResolve } from "@rollup/plugin-node-resolve";

export default {
  input: "src/main.js",
  output: {
    file: "dist/bundle.js",
    format: "esm",
  },
  plugins: [nodeResolve()],
};

src/cow.js #

ソースコードの本体ファイルその１です。cowsay ライブラリを利用して、メッセージを表示する便利クラスを定義しています。

import { say } from "cowsay";

export default class Cow {
  static print(message) {
    const cow = say({ text: message });
    console.log(cow);
  }
}

src/main.js #

ソースコードの本体ファイルその２です。Cow クラスをインポートして、メッセージを表示しています。

import Cow from "./cow.js";

main();

function main() {
  const message = "Hello World!";
  Cow.print(message);
}

２．実行してみる #

まずは依存関係をインストールします。

npm i

とりあえず、ソースコードを実行してみます。

node src/main.js

以下のようにアスキーアートが表示されれば成功です。

 ______________
< Hello World! >
 --------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

では、rollup.js でバンドルしてみます。

npm run bundle

dist/bundle.js というファイルが生成されます。これを実行してみます。

node dist/bundle.js

さきほどと同じようにアスキーアートが表示されれば成功です。

bundle.js の中身を確認してみましょう。cowsay ライブラリ含め、すべてのコードが１つのファイルにまとめられていることがわかります。