rollup-bundler

Rollup バンドラー

ES モジュールとライブラリ開発向けに最適化された JavaScript モジュールバンドラー、Rollup.js のエキスパートとして、Rollup の設定を扱う際は以下のガイドラインに従ってください。

基本原則

• Rollup は ES モジュール向けに設計されており、よりクリーンで小さいバンドルを生成します
• 実行パスを詳細に分析することで、優れたツリーシェイキングを実現します
• 他のプロジェクトで利用されるライブラリやパッケージに最適です
• 効率的で読みやすい出力コードの生成を重視します

プロジェクト構成

project/
├── src/
│   ├── index.js          # Main entry point
│   ├── modules/          # Internal modules
│   └── utils/            # Utility functions
├── dist/                 # Build output
│   ├── bundle.esm.js     # ES module format
│   ├── bundle.cjs.js     # CommonJS format
│   └── bundle.umd.js     # UMD format
├── rollup.config.mjs     # Configuration file
└── package.json

設定の基本

基本設定

// rollup.config.mjs
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
    sourcemap: true
  }
};

複数の出力形式

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/bundle.esm.js',
      format: 'esm',
      sourcemap: true
    },
    {
      file: 'dist/bundle.cjs.js',
      format: 'cjs',
      sourcemap: true
    },
    {
      file: 'dist/bundle.umd.js',
      format: 'umd',
      name: 'MyLibrary',
      sourcemap: true
    }
  ]
};

出力形式

ES モジュール（esm）

• バンドルを ES モジュールファイルとして保持します
• モダンなバンドラーやブラウザーに最適です
• 利用側のプロジェクトでツリーシェイキングをサポートします

CommonJS（cjs）

• Node.js 環境向けです
• require() 構文と互換性があります

UMD（Universal Module Definition）

• AMD、CJS、IIFE として動作します
• 幅広い互換性が必要なライブラリに最適です

IIFE（Immediately Invoked Function Expression）

• 自己実行関数です
• ブラウザーのスクリプトタグでの使用に適しています

ES モジュールのベストプラクティス

名前付きエクスポートを使用する

// Prefer named exports for better tree-shaking
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// Avoid default exports when possible
// export default { add, subtract }; // Less tree-shakeable

静的インポート

// Static imports enable tree-shaking
import { specificFunction } from './utils';

// Avoid dynamic requires in library code
// const utils = require('./utils'); // CommonJS - no tree-shaking

必須プラグイン

Node Resolve

import resolve from '@rollup/plugin-node-resolve';

export default {
  plugins: [
    resolve({
      browser: true,
      preferBuiltins: false
    })
  ]
};

CommonJS 変換

import commonjs from '@rollup/plugin-commonjs';

export default {
  plugins: [
    commonjs()
  ]
};

Babel によるトランスパイル

import babel from '@rollup/plugin-babel';

export default {
  plugins: [
    babel({
      babelHelpers: 'bundled',
      presets: ['@babel/preset-env']
    })
  ]
};

TypeScript のサポート

import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.ts',
  plugins: [
    typescript({
      tsconfig: './tsconfig.json'
    })
  ]
};

ミニファイ

import terser from '@rollup/plugin-terser';

export default {
  plugins: [
    terser()
  ]
};

環境変数

import replace from '@rollup/plugin-replace';

export default {
  plugins: [
    replace({
      preventAssignment: true,
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
};

外部依存関係

依存関係を外部として指定する

export default {
  input: 'src/index.js',
  external: ['react', 'react-dom', 'lodash'],
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
    globals: {
      react: 'React',
      'react-dom': 'ReactDOM'
    }
  }
};

Peer Dependencies のパターン

import pkg from './package.json';

export default {
  external: [
    ...Object.keys(pkg.peerDependencies || {}),
    ...Object.keys(pkg.dependencies || {})
  ]
};

コード分割

複数のエントリーポイント

export default {
  input: {
    main: 'src/index.js',
    utils: 'src/utils/index.js'
  },
  output: {
    dir: 'dist',
    format: 'esm'
  }
};

動的インポート

// Rollup handles dynamic imports automatically
async function loadModule() {
  const module = await import('./heavy-module.js');
  return module.default;
}

ツリーシェイキングの最適化

純粋関数のアノテーション

// Mark functions as pure for better tree-shaking
export const compute = /*#__PURE__*/ createCompute();

副作用の設定

{
  "name": "my-library",
  "sideEffects": false
}

ウォッチモード

// rollup.config.mjs
export default {
  watch: {
    include: 'src/**',
    clearScreen: false
  }
};

コマンドライン：

rollup -c -w

Package.json の設定

{
  "name": "my-library",
  "version": "1.0.0",
  "main": "dist/bundle.cjs.js",
  "module": "dist/bundle.esm.js",
  "browser": "dist/bundle.umd.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/bundle.esm.js",
      "require": "./dist/bundle.cjs.js"
    }
  },
  "files": ["dist"],
  "sideEffects": false
}

ベストプラクティス

推奨事項

• ES6 モジュール構文を一貫して使用します
• サードパーティの依存関係を外部として指定します
• デバッグ用にソースマップを生成します
• ツリーシェイキングを強化するため、名前付きエクスポートを使用します
• すべての出力形式をテストします
• 開発中はウォッチモードを使用します

避けるべきこと

• Peer Dependencies をバンドルする
• ES モジュールが利用可能な場合に CommonJS モジュールを使用する
• バンドルサイズを無視する
• ライブラリの TypeScript 宣言ファイルを省略する

よく使われる設定パターン

ライブラリの設定

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import terser from '@rollup/plugin-terser';
import pkg from './package.json';

export default {
  input: 'src/index.ts',
  external: Object.keys(pkg.peerDependencies || {}),
  plugins: [
    resolve(),
    commonjs(),
    typescript({ tsconfig: './tsconfig.json' }),
    terser()
  ],
  output: [
    { file: pkg.main, format: 'cjs', sourcemap: true },
    { file: pkg.module, format: 'esm', sourcemap: true }
  ]
};

デバッグと分析

• 設定のデバッグには --configDebug フラグを使用します
• すべての形式でソースマップを生成します
• バンドルの分析には rollup-plugin-visualizer を使用します
• 出力コードの読みやすさを確認します