これまでビルドツールと言えば、Webpackや gulpが主流でしたが、最近新たにParcel（パーセル）というのがあるのを知りました。
これは npm でインストール可能なパッケージでその特徴が「設定ファイル」が不要というところです。
実際にParcelを試してみた感想をこの記事で紹介します。
Parcel（パーセル）とは
Parcelは設定不要のビルドツールです。
自分はこれまでgulpをよく使っていたのですが、それでできていたことはほぼできている印象です。
なぜParcel（パーセル）が良いのか
Parcelを使う理由としてはそのお手軽さです。
設定ファイルが不要なので、初回の導入も楽で人に渡すときも簡単です。
gulpのときに実際に合ったのですがバージョン3→4に切り替えるときにjsを書き換えないといけなかったり、その人の環境がgulp3で動かないみたいなトラブルに巡り合ったりと思っていたよりも保守に時間を取られるということがありました。
Parcelではそういった保守のリスクがないのが大きなメリットだと感じています。
もちろん、Webpackのほうが高機能で何でもできますが反面設定ファイルがカオスになったり、プロジェクトの途中から入った人が設定ファイルを触るのは大変など、Webpack疲れが起きているのが現実です。
規模や用途によってそういった面にも目をつぶって保守しないといけない案件はあるでしょうがすべての案件がそうなるわけではないので、シンプルな構成で良いものはParcelを使うという選択肢が出てきます。
Parcel（パーセル）ができること
実際に試してみたことは下記です。
- SCSSの利用
- Pugの利用
- html,css,jsのピルド
- ローカルサーバーの立ち上げ
- ブラウザシンク
他にも下記の変換・形式をサポートしています。
- Babel (.babelrc)
- TypeScript
- PostCSS (.postcssrc等)
- PostHtml (.posthtmlrc等)
- CSS Module
- LESS
- SASS
- Stylus
インストール
グローバル（システム）にインストールする場合は以下のコマンドを実行します。
# yarn
$ yarn global add parcel-bundler
# npm
$ npm install -g parcel-bundler
プロジェクトディレクトリにインストールする場合はnpm initか yarn init -yでpackage.jsonを作成し以下のコマンドを実行します。
# yarn
$ yarn add --dev parcel-bundler
# npm
$ npm install --save-dev parcel-bundler
これで準備は簡単です。
ファイル構成
シンプルな構成ですと下記のような感じです。
index.html
src/
┣━ app.js
┗━ app.css
htmlも特殊な書き方は不要で相対パスで読み込めば問題有りません。
もしcssでなく、scssを利用したい場合は読み込むファイルをscssで書いておくだけで、ビルド後にcssのパス設定に書き換えてくれます。
実行コマンド
下記のコマンドでParcelが立ち上がります。
# グローバルから実行する場合
$ parcel index.html
# プロジェクトディレクトリから実行する場合
$ npx parcel index.html
このコマンドで dist/にファイルがビルドされ、ブラウザシンクが走った状態でローカルサーバーが立ち上がります。
※ distのディレクトリは自動で作られます
ブラウザシンクが走っているので、変更検知してブラウザに反映されますし同時にビルドもされます。
ビルドのコマンド
netlifyなどを利用する際はローカルサーバーを立ち上げる必要はなくビルドだけすれば良いです。
そういった場合は下記のコマンドで同様に dist/の中にビルドされるので大丈夫です。
# ビルドのみをする
npx parcel build index.html
最後に
覚えるコマンドも少なく、何かやろうとすると自動で何でもしてくれる感じが強いので、かなりいい感じの印象です。
事細かくなんでもできるわけではないので、Webpackを超えたとかといういう話ではないのですが、お手軽に開発環境を作れる選択肢が増えてとても良かったです。