Parcel
JSやCSSのビルド環境として、Parcelを導入しました。
parcel index.html
このように設定いらずがコンセプトで、ファイルを指定するだけで依存関係のあるリソースをコンパイルしてくれる、素敵なビルドツールです。
導入の経緯
それまでは、webpack(Vue-CLIのテンプレート)の環境で開発していました。
そもそもとして、導入したプロジェクトでは、Golang(Gin)のtemplatesでOGP（と、ついでに個別ページのコンテンツ本文）をセットして返す形のSPAを開発していました。そのため、サーバサイドとフロントは分離せずに同じレポジトリで管理しています。
resouses/js/front(vue-project)
resouses/js/admin(vue-project)
のようにしてみたり、
resouses/js(vue-project)のようにして、その中でマルチエントリーにしてみたり試していました。まあイケていないとは思っていました。
そこで、「身軽なフロント環境にしたい」思いで、Parcelの導入をしました。
– SPAとはいえ、ゴリゴリフロントに力をいれるつもりもなかったので。
– 現状のGolangのテンプレートでいい感じにレイアウトとか使い回す方法がよくわかっていない
そのぐらいの理由です。
使いにくかった部分
- ひとつのファイルにまとめて出力できない
https://qiita.com/soarflat/items/3e43368b2d767c730781
webpackの場合、cssや画像なども1つのJavaScriptファイルにまとめられて出力される。
一方でParcelの場合、依存関係を解決したファイルがそれぞれ出力される。
そのため、今回は4つのファイルが出力される。
GoのtemplatesでビルドしたJSのパスを挿入して使う場合に、複数ファイルで出力されたJS, CSSなどを扱うのは大変面倒です。
parcel-manifestというプラグインでJSONを出力して、マッピングして使っていましたが、「node_modules内のパス: distのパス」みたいなファイルもあって単純には追えないです。
特に、ElementUIではCSS内でのimportがあったり、フォントファイルがあったり、それがそれぞれ出力されて、今回のプロジェクトのようなケースでは通用しないように思ってきました。
良かったところ
- ビルド早い
- 設定いらずですぐに使える
- フロントをちゃんと分けていて、distをそのまま公開すればいいようなケースには有効だと思う
- 依存関係の単純なSCSSやJSのコンパイルだけできればいいケースにも良さそう
環境適応みたいな部分
設定ファイルを持たないParcelですが、CLIのオプションでいくつかの設定をすることができます。
例えば、出力先のパスであったり、publicのパス、ソースマップの有無など。
一応、package.jsonのscriptsで設定部分を管理していましたが、やっぱりちょっと無理があったり、アップデートで状況が変わりそうといった懸念。
自分でwebpack.config.jsを書く
以前、バイト先のフロントエンド勉強会でWebpackの最小構成のハンズオンをしました。
Vue-CLIなどで生成したちょっと気持ちが重たい設定ファイルしかしらなかった自分には、拍子抜けするぐらいシンプルでした。
それを思い出しながら、Vue.js最小構成ぐらいの設定ファイルを作って再構築しました。変な設定もないのでpackage.jsonのscriptsでコマンドを書き換えてちょっとコードを調整するぐらいです。
webpack.config.jsは、webpackの公式のGet Startedあたりを参考にコンパクトなものをベースに、vue-loaderのドキュメント見てプラグインを設定してといった流れで必要な設定を済ませていきました。
開発サーバはGinの開発モードで起動するので、webpack watchができればよかったので、そのあたりの設定がVue-CLIで作った場合との差になるかと思います。マルチエントリーでadminとユーザ向けのフロントは分離しています。
終わり
結局はwebpackが良かった。
正確には、webpackでプロジェクトにぴったりな設定をするのが一番快適という結論になりました。
