Parcel.js で簡単フロントエンド開発 - 器用貧乏エンジニアリング

Parcel.js を触ってみたので、簡単に説明と所感を書きなぐっておこうと思います。

Parcel.js とは

Parcel.js は2017年に登場した、モジュールバンドラーです

マルチコアプロセッサやキャッシュ機構を利用して、高速なビルドを実現していたり
html ファイルをエントリーファイルとして指定できたりと良さそうな機能がいくつかありますが

一番の魅了は設定ファイルなしで使えることだと個人的に思っています

parceljs.org

使い方

React + TypeScript のアプリケーションを例に説明したいと思います

まず準備としてparcel 自体をインストールします

// yarn
$ yarn global add parcel-bundler

あとは実際にアプリケーションを作成するディレクトリ内で、必要パッケージをインストールしていきます

$ yarn init -y
$ yarn add react react-dom @types/react @types/react-dom
$ yarn add -D typescript

ここまでできたらあとはアプリケーションのコードを書いていくだけです

// index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello Parcel</title>
    </head>
    <body>
        <div id="app"></div>
        <!-- tsx ファイルを直接指定できる -->
        <script src="./src/index.tsx"></script>
    </body>
</html>

// src/index.tsx
import * as React from 'react';
import { render } from 'react-dom';

render (
    <h1>Hello Parcel</h1>,
    document.getElementById('app')
);

アプリケーションが書けたらparcel コマンドを実行してみましょう

$ parcel index.html
Server running at http://localhost:1234
✨  Built in 1.41s.

するとlocalhost:1234で作成したアプリケーションが動作します。
ホットリロード機能も組み込まれているので、ファイルを編集すると即時に動作中のアプリケーションに反映されます。

所感

設定ファイルなしで動作する

設定ファイルなしで動作する、ということよりもそもそも設定ファイルがないことが真のメリットだと個人的には思います。
設定ファイルがない、という制約は設定ファイルの肥大化や属人化が回避できることに繋がります。

Webpack の代わりになるか

Webpack は設定ファイルやプラグインなどを用いて、様々なことが実現できるので完全に代用になるかと言われると難しいと思っています。
しかし、ある程度基本的なことはParcelでも十分に対応ができるので、Parcel でスタートして必要に応じてwebpackに乗り換えるみたいな使い方が良いのでは、と個人的に思っています Parcelは設定ファイルやその他の依存ファイルはないので、移行も簡単だと思います。