MENU
  1. ホーム
  2. JavaScript
  3. JavaScriptモジュールバンドラーWebpackとRollupの導入と設定方法

JavaScriptモジュールバンドラーWebpackとRollupの導入と設定方法

JavaScript

JavaScript開発において、モジュールバンドラーは複数のファイルを効率的に管理し、最終的に1つのファイルにまとめるために使用される重要なツールです。特に大規模なプロジェクトでは、コードをモジュールに分割して管理することが一般的です。これにより、コードの再利用性が向上し、保守性も高まります。しかし、これらのモジュールをブラウザで動作させるためには、適切にバンドルする必要があります。WebpackやRollupは、こうしたモジュールバンドリングを自動化し、開発者が効率的に作業できるようにサポートするツールです。本記事では、WebpackとRollupの導入方法と設定手順について詳しく解説します。これにより、JavaScriptプロジェクトの構築と管理がより容易になります。

目次

モジュールバンドラーとは

モジュールバンドラーは、JavaScriptのコードをモジュール単位で管理し、それらを1つのファイルまたは複数の最適化されたファイルにまとめるツールです。モジュールバンドラーを使用することで、コードの依存関係を解決し、ブラウザで実行可能な形に変換します。

モジュールバンドラーの役割

モジュールバンドラーは以下の役割を果たします。

  • 依存関係の解決：モジュール間の依存関係を解析し、正しい順序でバンドルします。
  • コードの最適化：不要なコードの除去や、圧縮を行い、パフォーマンスを向上させます。
  • 複数の出力形式：ES6モジュールやCommonJSなど、異なるモジュール形式に対応した出力を生成します。

なぜモジュールバンドラーが必要なのか

現代のWeb開発において、モジュールバンドラーが必要な理由は以下の通りです。

  • 管理の効率化：大規模なプロジェクトで多数のファイルを扱う場合、手動で依存関係を管理するのは困難です。モジュールバンドラーはこれを自動化します。
  • パフォーマンスの向上：コードを最適化してサイズを削減し、読み込み速度を向上させることができます。
  • 開発体験の向上：ホットリロードやソースマップの生成など、開発者が快適にコーディングできる環境を提供します。

これにより、モジュールバンドラーは現代のJavaScript開発において不可欠なツールとなっています。

Webpackの特徴と利点

Webpackは、JavaScriptモジュールをバンドルするための強力なツールであり、多くの機能と利点を提供します。

Webpackの主要な機能

Webpackは多機能で柔軟なツールであり、以下の主要な機能を提供します。

  • モジュールバンドリング：JavaScriptだけでなく、CSSや画像ファイルなどもモジュールとして扱い、バンドルできます。
  • コード分割：大きなバンドルを複数のチャンクに分割し、必要な時に読み込むことができます。
  • プラグインシステム：さまざまなプラグインを使用して、バンドルプロセスを拡張できます。
  • ローダー：異なるファイル形式（例：TypeScript、SASS）をJavaScriptに変換するためのローダーを使用できます。

Webpackの利点

Webpackを使用することで得られる主な利点は以下の通りです。

  • 依存関係の管理：Webpackは依存関係を自動的に解析し、正しい順序でバンドルします。
  • パフォーマンスの向上：コードの圧縮や不要なコードの除去により、パフォーマンスが向上します。
  • 開発体験の向上：開発サーバー、ホットモジュールリプレースメント（HMR）、ソースマップ生成など、開発を効率化する機能が豊富です。
  • 柔軟性と拡張性：プラグインやローダーを使用して、さまざまなワークフローやプロジェクト要件に対応できます。

実際の使用例

例えば、大規模なシングルページアプリケーション（SPA）を開発する際、Webpackはコード分割やホットリロード機能を提供し、開発者が効率的に作業できるようにサポートします。また、複数のチームが異なるコンポーネントを開発している場合でも、依存関係を一元管理することで、統一されたビルドプロセスを実現できます。

Webpackのインストール手順

Webpackをプロジェクトに導入するためには、Node.jsとnpm（Node Package Manager）が必要です。以下に、Webpackのインストール手順を説明します。

Step 1: Node.jsのインストール

まず、Node.jsをインストールします。Node.jsの公式サイト（https://nodejs.org/）からインストーラーをダウンロードし、指示に従ってインストールします。インストール後、以下のコマンドでNode.jsとnpmが正しくインストールされているか確認します。

node -v
npm -v

Step 2: プロジェクトの初期化

次に、プロジェクトディレクトリを作成し、npmを使ってプロジェクトを初期化します。

mkdir my-webpack-project
cd my-webpack-project
npm init -y

これにより、package.jsonファイルが作成されます。

Step 3: Webpackのインストール

プロジェクトにWebpackとWebpack CLIをインストールします。

npm install --save-dev webpack webpack-cli

Step 4: Webpack設定ファイルの作成

プロジェクトのルートディレクトリにwebpack.config.jsという名前の設定ファイルを作成します。このファイルにWebpackの基本設定を記述します。例えば、以下のような内容になります。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development'
};

Step 5: スクリプトの設定

package.jsonファイルにビルドスクリプトを追加します。

"scripts": {
  "build": "webpack"
}

Step 6: プロジェクト構造の設定

srcディレクトリを作成し、その中にindex.jsファイルを作成します。これがエントリーポイントになります。

mkdir src
echo "console.log('Hello, Webpack!');" > src/index.js

Step 7: ビルドの実行

以上の設定が完了したら、以下のコマンドでWebpackを実行し、プロジェクトをビルドします。

npm run build

これで、distディレクトリにbundle.jsファイルが生成されていることを確認します。以上で、Webpackの基本的なインストールと初期設定が完了です。次に、さらに詳細な設定や機能について説明していきます。

Webpackの基本設定

Webpackの基本設定は、webpack.config.jsファイルで行います。このファイルには、エントリーポイント、出力先、モード、ローダー、プラグインなどの設定を記述します。以下に、基本的な設定方法を詳しく説明します。

エントリーポイントの設定

エントリーポイントは、Webpackが依存関係を解析し始める最初のファイルを指定します。通常、srcディレクトリ内のindex.jsファイルをエントリーポイントとして設定します。

module.exports = {
  entry: './src/index.js',
};

出力先の設定

出力先は、バンドルされたファイルをどこに生成するかを指定します。pathモジュールを使用して、絶対パスを指定する必要があります。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

モードの設定

Webpackには、development、production、noneの3つのモードがあります。developmentモードは開発中に使用し、コードのデバッグがしやすくなります。productionモードは本番環境で使用し、コードの最適化が行われます。

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development', // または 'production'
};

ローダーの設定

ローダーは、特定のファイルタイプを変換するために使用します。例えば、Babelを使用してES6コードをES5に変換する場合、babel-loaderを設定します。

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

プラグインの設定

プラグインは、Webpackのビルドプロセスを拡張するために使用します。例えば、HtmlWebpackPluginを使用して、バンドルされたファイルを含むHTMLファイルを自動生成します。

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

デベロップメントサーバーの設定

Webpack DevServerを使用すると、開発中にファイルをホットリロードして素早く確認できます。

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    hot: true,
  },
};

これで、Webpackの基本的な設定が完了しました。次に、Rollupの特徴と利点について解説します。

Rollupの特徴と利点

Rollupは、JavaScriptモジュールバンドラーの一つであり、特にライブラリやモジュールのバンドリングに強みを持っています。以下に、Rollupの主要な特徴と利点を紹介します。

Rollupの主要な特徴

Rollupは、軽量で効率的なバンドラーとして設計されています。その主要な特徴は次の通りです。

  • Tree Shaking：使用されていないコードを自動的に除去し、最小限のコードをバンドルします。これにより、出力サイズが小さくなります。
  • ES6モジュールサポート：ネイティブなES6モジュールをサポートしており、標準化されたモジュールシステムを使用できます。
  • プラグインシステム：拡張可能なプラグインシステムを持ち、さまざまな形式のファイルを処理できます。
  • シンプルな設定：設定ファイルがシンプルで分かりやすく、学習コストが低いです。

Rollupの利点

Rollupを使用することで得られる主な利点は以下の通りです。

  • 出力ファイルのサイズが小さい：Tree Shaking機能により、不要なコードが除去され、最小限のファイルサイズでバンドルできます。
  • 効率的なモジュールバンドリング：ES6モジュールのサポートにより、モジュール間の依存関係が効率的に管理されます。
  • 高速なビルド：Rollupはビルド速度が速く、大規模なプロジェクトでも迅速にバンドルできます。
  • 簡潔な設定：設定ファイルが簡潔で理解しやすく、初学者にも扱いやすいです。

実際の使用例

例えば、JavaScriptライブラリを開発する際、Rollupは理想的なツールです。ライブラリのコードを最適化し、最小限のサイズで配布することができます。また、Rollupは複数の出力形式（UMD、ESM、CommonJSなど）をサポートしており、異なる環境での利用を容易にします。

Rollupと他のバンドラーとの比較

Rollupは、他のモジュールバンドラー（例えば、Webpack）と比較して、ライブラリやモジュールのバンドリングに特化しています。特に、Tree Shaking機能とES6モジュールのサポートにより、最適化されたバンドルを生成する点が優れています。一方、Webpackはアプリケーション全体のバンドリングに強みがあり、多機能で柔軟なツールです。

次に、Rollupのインストール手順について説明します。

Rollupのインストール手順

Rollupをプロジェクトに導入するための手順を説明します。Rollupのインストールと初期設定を行うことで、モジュールを効率的にバンドルできるようになります。

Step 1: Node.jsのインストール

Rollupを使用するためには、Node.jsとnpmが必要です。Node.jsの公式サイト（https://nodejs.org/）からインストーラーをダウンロードし、インストールします。インストール後、以下のコマンドでNode.jsとnpmが正しくインストールされているか確認します。

node -v
npm -v

Step 2: プロジェクトの初期化

プロジェクトディレクトリを作成し、npmを使ってプロジェクトを初期化します。

mkdir my-rollup-project
cd my-rollup-project
npm init -y

これにより、package.jsonファイルが作成されます。

Step 3: Rollupのインストール

プロジェクトにRollupとRollup CLIをインストールします。

npm install --save-dev rollup

Step 4: Rollup設定ファイルの作成

プロジェクトのルートディレクトリにrollup.config.jsという名前の設定ファイルを作成します。このファイルにRollupの基本設定を記述します。例えば、以下のような内容になります。

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife', // 形式は 'iife', 'cjs', 'es', 'umd' など
    name: 'MyBundle'
  }
};

Step 5: スクリプトの設定

package.jsonファイルにビルドスクリプトを追加します。

"scripts": {
  "build": "rollup -c"
}

Step 6: プロジェクト構造の設定

srcディレクトリを作成し、その中にindex.jsファイルを作成します。これがエントリーポイントになります。

mkdir src
echo "console.log('Hello, Rollup!');" > src/index.js

Step 7: ビルドの実行

以上の設定が完了したら、以下のコマンドでRollupを実行し、プロジェクトをビルドします。

npm run build

これで、distディレクトリにbundle.jsファイルが生成されていることを確認します。以上で、Rollupの基本的なインストールと初期設定が完了です。次に、Rollupの基本設定について詳しく解説します。

Rollupの基本設定

Rollupの設定は、rollup.config.jsファイルに記述します。このファイルでは、エントリーポイント、出力設定、プラグインなどの設定を行います。以下に、Rollupの基本的な設定方法を説明します。

エントリーポイントの設定

エントリーポイントは、Rollupが依存関係を解析し始める最初のファイルを指定します。通常、srcディレクトリ内のindex.jsファイルをエントリーポイントとして設定します。

export default {
  input: 'src/index.js',
};

出力設定

出力設定では、バンドルされたファイルの保存先や形式を指定します。例えば、以下の設定では、distディレクトリにbundle.jsファイルを生成し、IIFE形式で出力します。

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife', // 出力形式を指定: 'iife', 'cjs', 'es', 'umd' など
    name: 'MyBundle', // グローバル変数名 (IIFE形式の場合)
  },
};

プラグインの設定

Rollupはプラグインを使用して機能を拡張できます。例えば、Babelを使用してES6コードをES5に変換する場合、@rollup/plugin-babelプラグインを設定します。

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

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MyBundle',
  },
  plugins: [
    babel({
      exclude: 'node_modules/**',
      babelHelpers: 'bundled',
      presets: ['@babel/preset-env'],
    }),
  ],
};

プラグインのインストール

プラグインを使用するためには、対応するパッケージをインストールする必要があります。Babelプラグインの場合、以下のコマンドでインストールします。

npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-env

CSSやその他のアセットの処理

RollupはJavaScriptファイルだけでなく、CSSや画像ファイルなどのアセットも処理できます。例えば、CSSファイルをインポートするためにrollup-plugin-postcssプラグインを使用します。

import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MyBundle',
  },
  plugins: [
    postcss({
      plugins: []
    }),
    babel({
      exclude: 'node_modules/**',
      babelHelpers: 'bundled',
      presets: ['@babel/preset-env'],
    }),
  ],
};

プラグインのインストールも必要です。

npm install --save-dev rollup-plugin-postcss

開発用サーバーの設定

Rollupでは、rollup-plugin-serveプラグインを使用して、簡易的な開発用サーバーを立ち上げることができます。

import serve from 'rollup-plugin-serve';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MyBundle',
  },
  plugins: [
    postcss({
      plugins: []
    }),
    babel({
      exclude: 'node_modules/**',
      babelHelpers: 'bundled',
      presets: ['@babel/preset-env'],
    }),
    serve({
      open: true,
      contentBase: ['dist'],
      port: 3000,
    }),
  ],
};

この設定で、開発用サーバーが起動し、http://localhost:3000でバンドルされたアプリケーションを確認できます。

これで、Rollupの基本設定が完了しました。次に、WebpackとRollupの比較について説明します。

WebpackとRollupの比較

WebpackとRollupはどちらもJavaScriptのモジュールバンドラーとして広く使われていますが、それぞれに特徴と利点があります。以下に、これらのツールの違いと使い分けについて比較します。

目的と適用範囲

Webpackは、主に大規模なアプリケーションのバンドリングに適しており、Rollupはライブラリやモジュールのバンドリングに特化しています。

Webpackの適用範囲

  • シングルページアプリケーション（SPA）の開発
  • 複雑な依存関係を持つ大規模プロジェクト
  • 各種アセット（CSS、画像、フォントなど）のバンドリング

Rollupの適用範囲

  • ライブラリやモジュールのバンドリング
  • 最小限のファイルサイズが求められるプロジェクト
  • ES6モジュールの使用が重視されるプロジェクト

機能の違い

WebpackとRollupは、機能の豊富さや拡張性に違いがあります。

Webpackの主な機能

  • コード分割：大規模アプリケーションのパフォーマンスを向上させるために、コードを分割して動的に読み込むことができます。
  • ローダー：JavaScript以外のファイル（CSS、画像など）をバンドルに含めるためのローダーが豊富です。
  • プラグイン：ビルドプロセスを拡張するためのプラグインが多数存在します。
  • デベロップメントサーバー：ホットモジュールリプレースメント（HMR）により、開発中の迅速なフィードバックが得られます。

Rollupの主な機能

  • Tree Shaking：未使用のコードを自動的に除去し、最小限のファイルサイズでバンドルします。
  • ES6モジュールサポート：ネイティブなES6モジュールを完全にサポートします。
  • プラグインシステム：必要な機能をシンプルに拡張できるプラグインシステムがあります。
  • シンプルな設定：設定ファイルが簡潔で分かりやすいです。

パフォーマンスとビルド速度

パフォーマンスとビルド速度も、これらのツールを選択する際の重要な要素です。

Webpackのパフォーマンス

  • 複雑なプロジェクトでも、強力な最適化機能により高いパフォーマンスを発揮します。
  • 初期設定が多い場合、ビルド速度が遅くなることがありますが、キャッシュやインクリメンタルビルドを利用することで改善できます。

Rollupのパフォーマンス

  • シンプルで効率的なバンドルにより、ビルド速度が速いです。
  • 特にTree Shaking機能により、ライブラリやモジュールの最適化された出力が得られます。

使い分けのポイント

プロジェクトの特性に応じて、WebpackとRollupを使い分けることが重要です。

Webpackを選ぶべきケース

  • 大規模なアプリケーションで、複雑な依存関係や多くのアセットが含まれる場合
  • 開発中にホットリロードやデバッグ機能が必要な場合
  • 多機能なバンドラーが求められる場合

Rollupを選ぶべきケース

  • 小規模なライブラリやモジュールを開発する場合
  • 出力ファイルのサイズを最小限に抑えたい場合
  • シンプルで高速なバンドラーが求められる場合

これらの違いを理解し、プロジェクトのニーズに応じて適切なツールを選択することが重要です。次に、実際のプロジェクトにおけるWebpackの使用例について説明します。

実践例: Webpackでのプロジェクト構築

ここでは、Webpackを使用して実際にプロジェクトを構築する手順を説明します。基本的なセットアップから高度な設定までをカバーし、実用的なアプリケーションの構築方法を紹介します。

Step 1: プロジェクトのセットアップ

まず、プロジェクトディレクトリを作成し、npmを使ってプロジェクトを初期化します。

mkdir my-webpack-app
cd my-webpack-app
npm init -y

Step 2: 必要なパッケージのインストール

次に、WebpackとWebpack CLI、さらに開発サーバーや基本的なローダーをインストールします。

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env css-loader style-loader html-webpack-plugin

Step 3: プロジェクト構造の設定

srcディレクトリを作成し、その中にindex.jsファイルとindex.htmlファイルを作成します。

mkdir src
echo "console.log('Hello, Webpack!');" > src/index.js
echo "<!DOCTYPE html><html><head><title>My Webpack App</title></head><body><script src='bundle.js'></script></body></html>" > src/index.html

Step 4: Webpack設定ファイルの作成

プロジェクトのルートディレクトリにwebpack.config.jsファイルを作成し、基本的な設定を記述します。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    hot: true
  }
};

Step 5: CSSファイルの追加

srcディレクトリにstyles.cssファイルを作成し、CSSを記述します。また、index.jsファイルでCSSをインポートします。

echo "body { background-color: #f0f0f0; }" > src/styles.css
echo "import './styles.css'; console.log('Hello, Webpack with CSS!');" > src/index.js

Step 6: スクリプトの設定

package.jsonファイルにビルドと開発用サーバー起動のスクリプトを追加します。

"scripts": {
  "build": "webpack",
  "start": "webpack serve --open"
}

Step 7: ビルドと開発サーバーの起動

以下のコマンドでWebpackのビルドを実行し、開発サーバーを起動します。

npm run build
npm start

これで、ブラウザが自動的に開き、http://localhost:8080でアプリケーションを確認できます。変更を加えると、ホットリロードによりリアルタイムでブラウザに反映されます。

高度な設定と最適化

ここでは、いくつかの高度な設定と最適化を紹介します。

コード分割

コード分割を使用すると、アプリケーションの初回読み込み速度を向上させることができます。

module.exports = {
  // 省略...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

環境ごとの設定

開発と本番環境で異なる設定を使用するために、webpack-mergeパッケージを使用します。

npm install --save-dev webpack-merge

webpack.common.js, webpack.dev.js, webpack.prod.jsファイルを作成し、それぞれに環境固有の設定を記述します。

// webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      // 省略...
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};
// webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    contentBase: './dist',
    hot: true
  }
});
// webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
});

package.jsonファイルのスクリプトも更新します。

"scripts": {
  "build": "webpack --config webpack.prod.js",
  "start": "webpack serve --config webpack.dev.js --open"
}

これで、開発環境と本番環境で異なる設定を使用してビルドとデプロイを行うことができます。次に、Rollupを使用したプロジェクト構築の実践例について説明します。

実践例: Rollupでのプロジェクト構築

ここでは、Rollupを使用して実際にプロジェクトを構築する手順を説明します。基本的なセットアップから高度な設定までをカバーし、実用的なライブラリやアプリケーションの構築方法を紹介します。

Step 1: プロジェクトのセットアップ

まず、プロジェクトディレクトリを作成し、npmを使ってプロジェクトを初期化します。

mkdir my-rollup-app
cd my-rollup-app
npm init -y

Step 2: 必要なパッケージのインストール

次に、Rollupと必要なプラグインをインストールします。

npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-babel @babel/core @babel/preset-env

Step 3: プロジェクト構造の設定

srcディレクトリを作成し、その中にindex.jsファイルを作成します。

mkdir src
echo "console.log('Hello, Rollup!');" > src/index.js

Step 4: Rollup設定ファイルの作成

プロジェクトのルートディレクトリにrollup.config.jsファイルを作成し、基本的な設定を記述します。

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

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife', // 出力形式を指定: 'iife', 'cjs', 'es', 'umd' など
    name: 'MyBundle',
  },
  plugins: [
    resolve(), // Node.jsモジュールをバンドルするためのプラグイン
    commonjs(), // CommonJSモジュールをバンドルするためのプラグイン
    babel({
      exclude: 'node_modules/**',
      babelHelpers: 'bundled',
      presets: ['@babel/preset-env'],
    }),
  ],
};

Step 5: スクリプトの設定

package.jsonファイルにビルドスクリプトを追加します。

"scripts": {
  "build": "rollup -c"
}

Step 6: CSSファイルの追加

srcディレクトリにstyles.cssファイルを作成し、CSSを記述します。また、index.jsファイルでCSSをインポートします。

echo "body { background-color: #f0f0f0; }" > src/styles.css
echo "import './styles.css'; console.log('Hello, Rollup with CSS!');" > src/index.js

Step 7: CSSプラグインの設定

RollupはデフォルトでCSSを処理しません。CSSを処理するために、rollup-plugin-postcssプラグインをインストールします。

npm install --save-dev rollup-plugin-postcss

その後、rollup.config.jsファイルを更新して、CSSファイルを処理する設定を追加します。

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MyBundle',
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**',
      babelHelpers: 'bundled',
      presets: ['@babel/preset-env'],
    }),
    postcss({
      plugins: []
    }),
  ],
};

Step 8: ビルドの実行

以下のコマンドでRollupのビルドを実行します。

npm run build

これで、distディレクトリにbundle.jsファイルが生成されていることを確認します。

開発用サーバーの設定

Rollupで開発用サーバーを使用するには、rollup-plugin-serveとrollup-plugin-livereloadプラグインをインストールします。

npm install --save-dev rollup-plugin-serve rollup-plugin-livereload

rollup.config.jsファイルに開発用サーバーの設定を追加します。

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MyBundle',
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**',
      babelHelpers: 'bundled',
      presets: ['@babel/preset-env'],
    }),
    postcss({
      plugins: []
    }),
    serve({
      open: true,
      contentBase: 'dist',
      port: 3000,
    }),
    livereload('dist'),
  ],
};

package.jsonファイルのスクリプトも更新します。

"scripts": {
  "build": "rollup -c",
  "dev": "rollup -c -w"
}

開発サーバーの起動

以下のコマンドで開発サーバーを起動します。

npm run dev

これで、ブラウザが自動的に開き、http://localhost:3000でアプリケーションを確認できます。変更を加えると、リアルタイムでブラウザに反映されます。

以上で、Rollupを使用したプロジェクトの構築手順が完了しました。次に、この記事のまとめを記載します。

まとめ

本記事では、JavaScript開発におけるモジュールバンドラーの重要性と、WebpackおよびRollupの導入と設定方法について解説しました。Webpackは、複雑な依存関係を持つ大規模なアプリケーションに適しており、豊富な機能と拡張性を提供します。一方、Rollupは、ライブラリやモジュールのバンドリングに特化しており、軽量で効率的なバンドラーとして優れています。

それぞれのツールの特徴と利点を理解し、プロジェクトのニーズに応じて適切なバンドラーを選択することが重要です。Webpackを使用したプロジェクト構築の実践例では、基本的なセットアップから高度な設定までをカバーし、開発環境の構築方法を学びました。Rollupの実践例では、軽量なライブラリやモジュールのバンドリング方法を詳細に解説しました。

モジュールバンドラーを適切に活用することで、JavaScriptプロジェクトの開発効率とコード品質を大幅に向上させることができます。この記事が、あなたのプロジェクトに適したツールを選択し、効率的な開発を進める一助となることを願っています。

JavaScript
設定 JavaScript ROLLUP Webpack モジュールバンドラー

コメント

コメントする

目次