はじめに
新しいプロジェクトを始めるたびに、webpack.config.jsとにらめっこした経験はありませんか。エントリーポイントの設定、ローダーの追加、プラグインの調整……。フロントエンド開発を始めるまでの「準備」に、本題そっちのけで時間を溶かしてしまうことは珍しくありません。
Parcelは、その準備の大部分をなくしてしまうビルドツールです。設定ファイルを書かなくても、HTMLファイルを1つ渡すだけでTypeScriptもSassもReactも動き出します。しかも裏側の変換処理はRustで実装されていて、決して遅くありません。
この記事では、Parcelがどうやって「設定不要」を実現しているのか、実際のインストール手順やコマンドの使い方とあわせて紹介していきます。
Parcelとは
Parcelは「ゼロコンフィグ」を掲げるWebアプリケーションバンドラーです。JavaScriptやTypeScriptはもちろん、React、Vue、HTML、CSS、Sass、Less、GraphQL、MDXなど幅広いファイル形式に、追加の設定なしで対応します。未対応の形式を使おうとすると、Parcelが必要なプラグインや開発依存関係を自動でインストールしてくれる点も特徴的です。
GitHubで44,000以上のスターを獲得しており、npmパッケージとして公開されています。開発ブランチは現在v2系です。
主な特徴
- ゼロコンフィグ - 設定ファイルなしで、HTMLファイルにscriptタグやlinkタグを書くだけで動き出します
- Rust製コンパイラによる高速化 - JavaScriptとCSSの変換処理をRustで実装しており、マルチコアを活かした並列処理で高速にビルドできます
- 徹底したキャッシュ - 変換・依存関係解決・バンドリング・最適化のすべての結果がキャッシュされ、変更していないコードは再ビルドされません
- 本番向けの自動最適化 - Tree-shaking、コード分割、画像最適化、コンテンツハッシュによるキャッシュバスティングなどを標準で実行します
- プラグインによる拡張性 -
.parcelrcでトランスフォーマーやリゾルバーなど8種類のプラグインタイプをカスタマイズできます
インストール
npm、yarn、pnpmのいずれからでもインストールできます。
# npm
npm install --save-dev parcel
# yarn
yarn add --dev parcel
# pnpm
pnpm add --save-dev parcel
package.jsonにScriptを追加しておくと、後述のコマンドをnpm run devのように呼び出せて便利です。
{
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html"
}
}
基本的な使い方
Parcelの使い方はシンプルで、エントリーポイントとなるファイル(多くの場合index.html)を指定してコマンドを実行するだけです。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="app"></div>
<script type="module" src="./index.tsx"></script>
</body>
</html>
// index.tsx
import React from 'react'
import { createRoot } from 'react-dom/client'
function App() {
return <h1>Hello, Parcel!</h1>
}
createRoot(document.getElementById('app')!).render(<App />)
このとき、package.jsonにReactやTypeScriptの依存関係を書き足すだけで、Babelの設定もtsconfigの調整も不要でそのまま動きます。開発サーバーを立ち上げるコマンドは次のとおりです。
npx parcel index.html
デフォルトではhttp://localhost:1234で開発サーバーが起動し、ファイルの変更を検知するとホットリロードが走ります。本番用にビルドする場合はbuildコマンドを使います。
npx parcel build index.html
distディレクトリに、ミニファイと最適化が施されたファイル一式が出力されます。
実践的なユースケース
Parcelは単純なHTML+JSの構成だけでなく、プロジェクトの規模や要件に応じていくつかの使い方のパターンがあります。
複数エントリーポイントの指定
複数ページのサイトや、ライブラリと管理画面が同居するプロジェクトでは、エントリーポイントを複数指定できます。グロブパターンも使えるので、ページが増えても設定を書き足す必要がありません。
npx parcel src/pages/*.html
複数のHTMLファイルをまとめてビルド対象にでき、それぞれが参照するCSSやJSも自動的に解決されます。静的サイトやマルチページアプリケーションを構築する際に有効なパターンです。
ライブラリのビルドターゲット
npmパッケージとして配布するライブラリを作る場合は、package.jsonにsource・main・moduleフィールドを指定することで、CommonJS版とESM版を同時に出力できます。
{
"source": "src/index.ts",
"main": "dist/main.js",
"module": "dist/module.js",
"types": "dist/types.d.ts"
}
mainにはCommonJS向け、moduleにはESM向けの出力先を指定します。バンドラー側がmoduleフィールドを優先して読み込むため、Tree-shakingが効きやすい配布物になります。ビルドコマンドは通常どおりparcel buildです。
.parcelrcによるプラグインのカスタマイズ
デフォルトの挙動で対応できないファイル形式や、独自の変換処理を挟みたい場合は.parcelrcで拡張します。
{
"extends": "@parcel/config-default",
"transformers": {
"*.svg": ["@parcel/transformer-svg-react"]
}
}
extendsでデフォルト設定を土台にしつつ、特定の拡張子だけトランスフォーマーを差し替えられます。トランスフォーマーだけでなくリゾルバーやパッケージャーなど、パイプラインの各段階をプラグイン単位で置き換えられるのがParcelの拡張性の高さです。
まとめ
Parcelは、設定ファイルを書く手間を徹底的に減らしながら、Rust製コンパイラと積極的なキャッシュによって速度も犠牲にしないビルドツールです。小さなプロトタイプならHTMLファイル1つで始められますし、規模が大きくなれば複数エントリーポイントや.parcelrcによるプラグイン拡張で対応できます。
webpackの設定に消耗している方や、これから新しいプロジェクトを立ち上げる方は、一度Parcelでindex.htmlを書いてコマンドを叩くところから試してみてはいかがでしょうか。