ホームページ >ウェブフロントエンド >jsチュートリアル >モジュールバンドラーの説明: Webpack、Rollup、Parcel、Snowpack と例

モジュールバンドラーの説明: Webpack、Rollup、Parcel、Snowpack と例

Susan Sarandonオリジナル: 2024-12-12 20:50:12658ブラウズ

Module Bundlers Explained: Webpack, Rollup, Parcel, and Snowpack with Examples

Web サイトの構築は、HTML、CSS、JavaScript だけで簡単に思えるかもしれません。しかし、アプリケーションが成長するにつれて、これらの要素以上のものが必要になります。 TypeScript、React などの UI ライブラリ、SASS などの CSS プリプロセッサ、またはサードパーティモジュールを使用する場合があります。この問題は、依存関係が適切に連携しない場合に発生し、その結果、競合、大きなファイル、読み込み時間の遅延が発生します。

ここで モジュールバンドラー が登場します。Webpack、Rollup、Parcel、Snowpack コードの管理と最適化を支援し、よりスムーズで迅速な開発と実稼働エクスペリエンスを実現します。このブログでは、概念を理解しやすくするために、例を使用してこれらのバンドラーの役割を検討します。

モジュールバンドラーとは何ですか?

モジュールバンドラーは、すべてのコード、その依存関係、およびモジュールを取得し、それらをブラウザー用に 1 つまたはいくつかの最適化されたファイルにバンドルするツールです。これにより、HTTP リクエストの数が減り、読み込み時間が短縮され、依存関係が効率的に管理されます。

モジュールバンドラーを使用する理由

最新の Web アプリケーションを構築すると、さまざまな課題に直面します。

依存関係管理: 複数のサードパーティライブラリを管理します。
コード分割: パフォーマンスを向上させるために必要なコードのみをオンデマンドでロードします。
トランスパイル: 最新の JavaScript (ES6) を古いブラウザーで動作するように変換します。
縮小: 読み込みを高速化するためにファイルサイズを削減します。

モジュールバンドラーは、次の方法でこれらの問題を解決します。

依存関係グラフ を作成します。
縮小し、コードをより小さなチャンクに分割します。
異なるブラウザ間での互換性を確保します。

簡単な Webpack セットアップの例

Webpack がどのように機能するかの例から始めましょう。 Lodash.

のような依存関係を持つ単純なindex.js ファイルがあるとします。

ステップ 1: 新しいプロジェクトを初期化します。

mkdir my-project
cd my-project
npm init -y
npm install lodash --save

ステップ 2: src ディレクトリにindex.js ファイルを作成します。

// src/index.js
import _ from 'lodash';

console.log(_.camelCase('hello world'));

ステップ 3: パブリックディレクトリ内にindex.html ファイルを作成します。

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack Example</title>
</head>
<body>
  <h1>Webpack Example</h1>
  <script src="../dist/main.js"></script>
</body>
</html>

ステップ 4: Webpack と Webpack CLI をインストールします。

npm install webpack webpack-cli --save-dev

ステップ 5: Webpack 構成ファイル (webpack.config.js) を作成します。

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', // Entry point of our app
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'), // Output directory
  },
  mode: 'development', // Development mode (use 'production' for production)
};

ステップ 6: Webpack を実行するスクリプトを package.json に追加します。

mkdir my-project
cd my-project
npm init -y
npm install lodash --save

ステップ 7: Webpack を実行してコードをバンドルします。

// src/index.js
import _ from 'lodash';

console.log(_.camelCase('hello world'));

これにより、index.js ファイルとその依存関係が dist フォルダー内の main.js ファイルにバンドルされます。これで、index.html でこのファイルを参照できるようになります。

その他のモジュールバンドラー

1.ロールアップ

Rollup は、JavaScript ライブラリをバンドルし、小規模プロジェクト向けに最適化されたバンドルを作成するために設計されています。 Webpack とは異なり、Rollup は未使用のコードを削除する (ツリーシェーキング) ことにより、より小さく効率的なバンドルに重点を置いています。

セットアップ例:

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack Example</title>
</head>
<body>
  <h1>Webpack Example</h1>
  <script src="../dist/main.js"></script>
</body>
</html>

単純な rollup.config.js ファイルを作成します:

npm install webpack webpack-cli --save-dev

アプリをバンドルするには、次のコマンドでロールアップを実行できます。

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js', // Entry point of our app
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'), // Output directory
  },
  mode: 'development', // Development mode (use 'production' for production)
};

ロールアップは、ツリーシェーク機能により、小規模なプロジェクトやライブラリをバンドルする場合にはるかにシンプルかつ効率的です。

2. 小包

Parcel は、構成不要のバンドラーです。構成ファイルを必要とせずに、必要なすべてのアセットを自動的に検出してバンドルします。初心者に優しく、小規模から中規模のプロジェクトに最適です。

セットアップ例:

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

index.js 内:

npm run build

開発サーバーを実行するには:

npm init -y
npm install lodash --save
npm install rollup --save-dev

Parcel は、追加の構成を行わずに、バンドル、ライブリロード、コード分割を自動的に処理します。

3. スノーパック

Snowpack は、必要な場合にのみファイルを再構築する最新の高速バンドラーです。変更のたびにすべてをコンパイルするのではなく、開発を迅速化するために依存関係をブラウザに直接送信します。

セットアップ例:

// rollup.config.js
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js', // Entry point
  output: {
    file: 'dist/bundle.js',
    format: 'iife', // Immediate function execution
    name: 'MyApp',
  },
  plugins: [terser()], // Minify the output bundle
};

snowpack.config.js で簡単な構成を作成します:

npx rollup -c

Snowpack を実行します:

npm init -y
npm install parcel-bundler --save-dev
npm install lodash --save

Snowpack は変更されたファイルのみをコンパイルし、開発中に即時更新を提供します。

結論

Webpack、Rollup、Parcel、Snowpack などのモジュールバンドラーは、最新の Web 開発において重要なツールです。これらは、依存関係の管理、コードの最適化、アプリケーションの読み込み時間の短縮に役立ちます。バンドラーの簡単な概要は次のとおりです:

Webpack: 高度に構成可能で、多くの依存関係を持つ大規模プロジェクトに最適です。
ロールアップ: ライブラリに最適で、木の揺れのある小さなバンドルに焦点を当てます。
Parcel: 設定不要で使いやすく、小規模なプロジェクトや迅速なプロトタイプに最適です。
Snowpack: 高速開発バンドラー。依存関係をブラウザに直接送信するため、大規模なプロジェクトの処理が高速になります。

これらのツールがどのように機能するかを理解することで、プロジェクトのニーズに最適なものを選択し、Web 開発ワークフローを向上させることができます。

以上がモジュールバンドラーの説明: Webpack、Rollup、Parcel、Snowpack と例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript typescript json css html es6 sass webpack for Directory public JS number this http ui everything Other

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：フロントエンドの質問パート 2次の記事：フロントエンドの質問パート 2

続きを見る

モジュール バンドラーの説明: Webpack、Rollup、Parcel、Snowpack と例

その他のモジュール バンドラー

1.ロールアップ

2. 小包

3. スノーパック

結論

関連記事

モジュールバンドラーの説明: Webpack、Rollup、Parcel、Snowpack と例

その他のモジュールバンドラー