Zenn
Closed8

JavaScriptのモジュールについてまとめてく: モジュールバンドラー編

JavaScript
webpack
#
module
Vite
#
modulebandler
ebi_yuebi_yu

モジュールバンドラー

複数のJavaScriptファイルをモジュールとして1つ(または複数)のファイルにまとめてくれるもの。
コードをまとめる際に、コードの最適化/サイズ削減などを行ってくれる。

Webpack,Viteなどがある。

https://alliance7.blogspot.com/2019/03/blog-post.html

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

1. 依存関係の解決

モジュールバンドラーは、アプリケーションが依存する各モジュール間の関連性を解析する。
import や require 文を使用して、プロジェクト内のファイル間の依存関係を把握し、それに基づいてバンドルを構築する。

2. コードのバンドリング

複数のファイルやモジュールを一つまたは複数のファイルにまとめる。
ファイル数が少なくなることで、HTTPリクエストの数を減少させ、Webアプリケーションの読み込み時間を短縮できる

3.トランスパイリングと最適化

最新のJavaScript（ES6以上）を古いブラウザでも動作するようにES5などの古い仕様に変換する。
コードを圧縮し、最適化することで、ファイルサイズを小さくし、パフォーマンスを向上させます。

ebi_yuebi_yu

モジュールバンドラー : Webpack

公式から引用

JavaScript アプリケーション用の静的モジュール バンドラーです。
Webpack がアプリケーションを処理するとき、Webpack は 1 つ以上のエントリ ポイントから依存関係グラフを内部で構築し、プロジェクトに必要なすべてのモジュールを 1 つ以上のバンドルに結合します。これらのバンドルは、コンテンツを提供するための静的資産です。

つまり、複数のコード形式のファイルを一つの静的なファイルにまとめてくれるもの。

webpack.config.jsに設定を書く

https://webpack.js.org/concepts/#entry

webpack.config.ts

const path = require('path');

module.exports = {
  // エントリーポイント: どのファイルからビルドを開始するか
  entry: './src/index.js',
  // 出力設定
  output: {
    // 出力ファイルの名前
    filename: 'bundle.js',
    // 出力先のパス
    path: path.resolve(__dirname, 'dist')
    // ESモジュール形式で出力
    libraryTarget: 'module' 
  },
  // モジュールとルール
  module: {
    rules: [
      {
        // 正規表現で対象のファイルを指定
        test: /\.css$/,
        // 使用するローダー
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  // 開発用サーバーの設定
  devServer: {
    static: './dist'
  }
};
  1. エントリーポイント (entry)
    Webpackがバンドルを始めるファイル。
    この例では、./src/index.js がエントリーポイントです。
  2. 出力 (output)
    バンドルされたファイルの出力設定。出力ファイル名や保存先ディレクトリを指定します。
    libraryTargetでどのモジュール形式でoutputするか指定できる (default : UMD)
  3. モジュール (module):
    プロジェクトで使用するさまざまなファイルタイプ（例えばCSSやJavaScript）をどのように処理するかを定義するルールです。
  4. 開発用サーバー (devServer)
    開発中に利用するローカルサーバーの設定です。
ebi_yuebi_yu

モジュールバンドラー : vite

公式より引用

Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。2 つの主要な部分で構成されています:
⚫︎ 非常に高速な Hot Module Replacement (HMR) など、ネイティブ ES モジュールを利用した豊富な機能拡張を提供する開発サーバー。
⚫︎ Rollup でコードをバンドルするビルドコマンド。プロダクション用に高度に最適化された静的アセットを出力するように事前に設定されています。

Vite は開発速度を重視して設計されており、標準で開発サーバーが組み込まれている
組み込み開発サーバによって、高速なHot Reloadが実現されている。
(Webpackではwebpack-dev-serverなどが別途必要。)

ビルドでrollup、デバックサーバ機能での起動でesbuildを使っているらしい。

https://gist.github.com/kenmori/e1fdd19e383c9d311afa057071896fca

vite.config.tsを使って設定を行う

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000
  },
  build: {
        rollupOptions: {
            input: 'src/index.ts',
            output: {
                format: 'system',
            }
})
  • defineConfig 関数を使って、設定オブジェクトを定義しています。
  • @vitejs/plugin-vue プラグインをインポートして、Vue.js のサポートを追加しています。
  • 開発サーバーのポートを 3000 に設定しています。

viteでは設定しなくてもdefaultでエントリーポイントや出力設定を自動的に設定してくれが、
例のように自身で設定することもできる。(default : ESN)
どのモジュール形式に変換するかはbuild.rollupOptions.modulesで指定できる。

ebi_yuebi_yu

Esbuild

Esbuildは、Go言語で実装された高速なJavaScriptモジュールバンドラー。並列処理と最適化を活用し、ビルド時間を大幅に短縮する。大規模なJavaScriptプロジェクトやフロントエンドフレームワークにおいて、その高速性が重宝される。

  • 高速ビルド
  • Go言語による実装
  • 大規模プロジェクト向け

https://esbuild.github.io/

Rollup

Rollupは、ES6モジュールのインポートとエクスポートを活用して、JavaScriptモジュールを一つのファイルにバンドルするツール。コード最適化により小さなバンドルを生成し、プラグインシステムを介して様々なファイル形式や追加機能の統合が可能。

  • ES6モジュールフォーカス
  • 小さなバンドル生成
  • 柔軟なプラグインシステム

https://rollupjs.org/

Parcel

Parcelは設定不要で迅速に利用開始できるWebアプリケーション用モジュールバンドラーです。JavaScript、CSS、HTMLなどの資源を処理し、ブラウザで利用しやすい形式にバンドルします。

  • 設定不要
  • 迅速な利用開始
  • 幅広いファイル形式のサポート

https://parceljs.org/

ebi_yuebi_yu

どれを使うか

これらのツールはそれぞれ異なる利点を持ちます。Esbuildは高速ビルドで大規模プロジェクト向け、RollupはES6モジュールフォーカスで柔軟性が高く、Parcelは設定不要で迅速な開発を支援します。Webpackは広範な資源サポートと拡張性に優れ、Viteは高速なHMRと軽量なビルドプロセスで現代的な開発を促進します。プロジェクトのニーズに合わせて適切なツールを選択することが重要です。

  • フロントエンド開発にはViteかEsbuildが良さそう
  • Frontend Roadmap でもViteとEsbuildが推奨されていた

https://roadmap.sh/frontend

ebi_yuebi_yu

余談: Babelについて

BabelはJavaScriptのトランスパイラーで、以下の目的で広く使用される。

1. 新しいJavaScript構文の変換

最新のJavaScript（ECMAScript）構文を、古いブラウザでもサポートするバージョンに変換する。これにより、開発者は最新の機能を利用しつつ、広範なブラウザ互換性を保持する。

2. JSXやTypeScriptの変換

ReactのJSXやTypeScriptなどの拡張構文を標準JavaScriptに変換する。

トランスパイラーとは

トランスパイラーは、一つのプログラミング言語で書かれたコードを別の言語の同等コードに変換するツールである。Babelのように、新しいJavaScript構文を古いJavaScript構文に変換する目的で用いられることが多い。

モジュールバンドラーとの関係

モジュールバンドラー（例：Webpack、Rollup、Parcel）は、複数のJavaScriptファイルを一つまたは少数のファイルに統合する。このプロセスで、Babelのようなトランスパイラーを統合し、新しいJavaScript構文の変換やブラウザ間の互換性を確保する。

ViteとBabelについて

Viteはモダンなブラウザ向けの高速な開発ツールで、多くの標準的な開発シナリオではBabelを必要としません。しかし、特定のブラウザ互換性や特殊なトランスパイリングが必要な場合には、Babelを組み込むことが可能です。ViteとBabelの選択は、プロジェクトの要件や目標に基づいて行うことが重要です。

このスクラップは4ヶ月前にクローズされました