新規に立ち上げるプロジェクトにWebpackじゃなくてParcelにした理由

お疲れ様です。MUGENUP エンジニアの崔です。今回は新規プロジェクトサービスを立ち上げる時にフロントエンドの構成でWebpackじゃなくてParcelにした理由に対して話します。

フロントエンドの話

新規プロジェクトのフロントエンドはVueにするように決まってVueを使うためにはトランスファイラーが必要でJavaScriptと一緒に組み合わせるためにバンドラーが必要でした。

bundler(バンドラー)の話

最近のウェブフロントエンドをやっている方だったら当然のようにパッケージ管理にnpmを使っているかと思います。 JavaScriptのファイルの間をどう繋ぐかはAMDやCommonJS、ESModuleなど色んな標準がありますけどそれの話はまた別に機会があればやりたいと思います。 で、バンドラーがやることとは様々なJavaScriptファイルを「一つの」JavaScriptファイルにすることです。 一つにするだけじゃなくてファイルを圧縮してサイズを減らしたり、標準のJavaScript、Node.jsでは通用しない文法もトランスファイルする（Babelを使って）こともやります。 まるでCとかC++のコンパイラーがやるコンパイルみたいな気もしましすね。

Webpackの話

Webpackは今は多分JavaScriptのバンドラーの中では結構使われているかと思います。基本的にはWebpack.config.jsファイルを作成してファイルをマージするところのエントリポイントを選択してそこから参照関係を探って一つのファイルにしてくれます。 もちろんCLIを設置してコマンドでも実行はできますけど、大体の場合はConfigファイルを作成しているかと思います

Webpackを使うためにはどのファイルから探ってパッケージを集めるとかSassやVueなどNode.js側でサーポートしていない言語を入れるためにPluginを設定しなきゃダメです。 下の公式ドキュメントから見ると。。

https://webpack.js.org/concepts/configuration/

var path = require('path');

module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

一見、書きやすいように見えますけど、下の記事みたいにPluginとか細かい設定が入るとコードが長くなります。これはConfigファイルを作った人にもある程度責任はありますね。 でも、そもそも特定のファイル（エントリポイント）からパッケージの依存関係を探るだけの話だったらConfigは必須ではないでしょう？と考えた人がありました。

Parcelの話

ここからが本題のParcelの話です。規模にもよりますけど特にプロジェクトが大きくないとか、まだ初期の段階だとしたらすぐバンドリングをやりたくなりませんか？ バンドラー自体がいらないケースを外すと大体は今でもすぐプロジェクトを立ち上げたくて我慢できないかと思います。 で、Parcelはnpm install -g parcelをやっただけで使えるようになります。

$ npm i -g parcel
$ # index.htmlにはmain.jsを呼び出していると仮定する
$ parcel --build index.html
Building main.js...
✨  Built in xx.xxs.

dist/main.xxxxxx.js.map             ⚠️  x.xx MB      xxms
dist/main.xxxxxx.js                  xxx.xx KB    xx.xxs
...

賢い可愛いParcelはindex.htmlから繋がっているエントリポイントになるJavaScriptのファイルからまたImportしてくるファイルの拡張子を覗いてPluginも、Babelも勝手に設置してBuildしてくれるんです。

開発モードでリアルタイムトランスファイルもできるし、 parcel index.html

JavaScriptをエントリポイントにして不要なMapファイルをBuild結果物から除外するのも可能です parcel build entry.js --no-source-maps

理由

つまりWebpackじゃなくてParcelにした理由は上でも書いた通り設定ファイルを書かなくてもPluginを入れてくれたり、ファイルを圧縮してくれるなど色々都合いい動きをしてくれたからです。 もちろんこれだけ見るとWebpackオワコンだねとか、Parcelだけ使えばいいじゃんって言えるかも知れませんけど Webpackはファイルを一個にまとめるだけじゃなくて結果対象を複数にできるとか、Configファイルって言ってもJavaScriptのコードなので拡張の可能性が高いと思います。

結論

今のプロジェクトの性格や、チームメンバーなの開発環境を考慮しながらバンドラーを選択するべきかと思います。