Parcelについて調べてみた
はじめに
2022年4月現在、モジュールバンドラといえばwebpack一択という印象を受けます。（個人的な偏見）
webpackはビルドに関して設定できることが多く汎用性も高い反面、webpack.config.js ファイルの設定について若干学習コストが高い印象を受けます。
例えば簡単なマークアップを行いたい場合、手軽なビルド環境でバンドルを生成できれば良いという場合が多いです。
そこで、手軽なビルド環境でバンドルを生成できるモジュールバンドラとしてParcelがあげられます。
今回はParcelについて調べたことを簡単にまとめてみました。
間違った理解をしている可能性もあるので、コメントでご指摘いただけると助かります🙇♂️
そもそもモジュールバンドラって何？
モジュールバンドラの目的は「複数のモジュールをまとめること」です。
「複数のモジュールをまとめること」と言われても、自分はフワッとした理解しかできませんでした。
まずモジュールやバンドルという言葉について理解が必要です。
こちらのbookがとても丁寧に解説されていて参考になりました。
バンドルとは
バンドルとは「まとめられたファイル（バンドルファイル）」のことを指します。
モジュールとは
モジュールはバンドルしたいファイルのことを指します。
例えばマークアップにおいてはHTMLやCSS、JavaScriptや画像ファイルがモジュールに該当します。
結局モジュールバンドラって何？
モジュールバンドラとは「複数のHTMLやCSSなどのモジュールファイルをバンドルファイルにまとめてくれるツール」のことです。
モジュールバンドラの種類
以下が代表的なモジュールバンドラになります。
npmtrendsで比較してみると、常にwebpackがトレンドになっており、対照的にParcelは使われていないようです。
Parcelについて
Parcelは2021年10月13日にParcel2.0.0がリリースされました。
その後も頻繁にバージョンアップが施され、現在はParcel 2.4.0(2022年3月22日リリース)が最新のバージョンになっています。
Parcelのメリットについて
npmtrendsの比較では人気が無いPaecelでしたが、Parcelには以下のメリットがあります。
①環境構築の手軽さ
②設定ファイルの記述が不要
このメリットに関しては、簡単なマークアップを行う場合はParcelと相性がいいように感じました。
①環境構築の手軽さ
例えば、マークアップの実装では以下が簡単に行えられれば良いはずです。
- ローカルサーバーで編集したHTMLを確認したい
- 納品時にバンドルファイルで提出したい
マークアップの実装では環境構築やバンドルの選定に多くの時間を使いたくありません。
できることなら選定にかける時間はマークアップの実装にかけたいはずです。
②設定ファイルの記述が不要
例えばモジュールにTypeScriptやSCSSを使用した場合、ts -> js,scss -> css にコンパイルを行う必要があります。
webpackは webpack.config.js ファイルで設定する必要がありますが、Parcelでは設定する必要はありません。
詳細な設定ができないデメリットはあるものの、設定ファイルの学習コストが無いため、そこまで考慮する必要のないマークアップにおいてはParcelで十分です。
Parcelの選定基準
このように簡単なマークアップの実装や、手軽にビルド環境を作成したい際はParcel採用する選択肢があっても良いはずです。
Parcelを簡単に使ってみる
Parcelをインストールしてバンドルファイルを作成してみます。
環境構築
任意のプロジェクトファイルを作成し、プロジェクトファイルを初期化します。
今回はparcel-testというファイルを作成し、parcel-test直下で以下のyarnコマンドを走らせます。
プロジェクトの作成
yarn init -y
するとフォルダ構成は以下のようになっているはずです。
parcel-test
├ node_modules
├ package.json
└ yarn.lock
Parcelのインストール
以下コマンドでParcelをインストールします。
yarn add -D parcel
html,scss,jsファイルの作成
以下のフォルダ構成でhtml,scss,jsファイルを追加します。
parcel-test
├ node_modules
├ src
│ ├ scripts
│ │ └ index.js
│ ├ styles
│ │ └ index.scss
│ └ index.html
├ package.json
└ yarn.lock
import "../styles/index.scss";
console.log("test");
.main-contents {
display: flex;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>test</title>
</head>
<body>
<script type="module" src="./scripts/index.js"></script>
<div class="main-contents">contents</div>
</body>
</html>
htmlを確認してみる
ここまで準備ができたらhtmlをローカルサーバーで確認してみます。
以下のコマンドでローカルサーバーが立ち上がり、画面が表示されるはずです。
yarn parcel src/index.html --open
画面
ここで index.html の contents というテキストを test に変更して保存してみます。
すると画面上のテキストも更新されたはずです。
これだけの環境構築で簡単にhtmlの編集が確認できました。
バンドルしてみる
ここでは先ほど作成した index.html,index.scss,index.js をバンドルします。
以下コマンドでindex.htmlをバンドルします。
yarn parcel build src/index.html
するとバンドル結果がdistファイルに出力されます。
parcel-test
├ dist <-ここにバンドル結果が出力される
├ node_modules
├ src
│ ├ scripts
│ │ └ index.js
│ ├ styles
│ │ └ index.scss
│ └ index.html
├ package.json
└ yarn.lock
おわりに
モジュールバンドラーの選定においてParcelが候補に上がることは多くないです。
しかし環境構築の手軽さなどを考慮するとParcelを使用することが良い場合もありそうですので、用件と技術次第では選定候補に入れても良いというのが個人的な見解です。
参考文献
Discussion