webpack時代の終わりとparcel時代のはじまり

設定不要のビルドツール

parcelというビルドツールが空前の勢いでGitHubスターを集めており、リリース数日で5000スターを超えています。今日だけでも1000スター以上増えており、Googleなどの有名企業リポジトリ以外でこのスピードで人気がでるのは異例です。

https://github.com/parcel-bundler/parcel
https://parceljs.org/

実際に試してみたところ、これはwebpack一強時代を終わらせるレベルの使いやすさだと確信しました。

作者はAdobeのエンジニアで、その他著名エンジニアも続々と参加している様子です。

webpack疲れ

webpackが出た当初、webエンジニアはgulp/grunt疲れの状態だったことを覚えている方もいるかと思います。
webpackの統合された設定ファイルは、タスクランナーで逐次処理していたものを宣言的にするという点で革新的でした。

しかし、その後バージョンアップのたびに設定ファイルを書き直すことになり、過度にモジュール化されたプラグインによって設定ファイルはカオスになっていきました。
個人的にも、毎回新しいレポジトリを作るために、開発環境の構築という無駄な作業に時間を取られ、webpack疲れを最近感じていました。

設定ファイル自体がない

parcelには設定ファイルがありません。（少なくとも私が探した限り存在しませんでした）
ただ単にコマンドラインでエントリポイントを指定するだけです。エントリポイントはHTMLに限らず、JS等も対応しています。

parcel index.html

これだけで依存しているhtml, js, css等を見つけてきてバンドルしてくれます。
babelの設定ファイル(.babelrc)があれば、勝手に読み込んでトランスコンパイルしてくれます。PostCSSも同様です。

Reactの例

parcelでReactアプリを書くための手順は驚くほどシンプルです。

1. 依存パッケージをインストール

   npm init -y
   npm install --save react react-dom
   npm install --save-dev babel-preset-react babel-preset-env parcel-bundler
   

2. .babelrcを追加する

   .babelrc

   {
      "presets": ["env", "react"]
   }
   

3. package.jsonのstartスクリプトに"parcel <ルートHTMLファイル>"を指定する。

   package.json

   ...
   "scripts": {
     "start": "parcel index.html"
   },
   ...
   

4. html, js, jsx, cssを書く

5. npm startを実行する。

6. http://localhost:1234 にブラウザからアクセスする。

これだけでホットリロードのReact開発環境が完成です。

#TypeScriptは？

今日(12/8)3時ごろTypeScriptサポートのPull Requestがマージされました。 現在npmに上がっているバージョン(v1.0.3)にはまだ反映されていませんが、開発スピードを見る限り数日以内でアップされると思います。
--> 追記: npmにTS対応バージョンv1.1.0がアップされました

Basic TypeScript Support
https://github.com/parcel-bundler/parcel/pull/84

Parcelドキュメント概説

コマンドラインオプション

-p: 開発用webサーバーのポート番号指定 (デフォルト1234)
watch: HMR(hot module replacement)のみ。開発用webサーバーは起動しない
build: 本番環境向けのバンドルのみ行う。HMR, 開発用webサーバーは起動しない。distディレクトリにminifyされた結果が出力される。
--out-dir (or -d): バンドル出力先の変更(デフォルトdist)

サポートしている変換機能・形式

• Babel (.babelrc)
• PostCSS (.postcssrc等)
• PostHtml (.posthtmlrc等)
• CSS Module
• LESS
• SASS
• Stylus