Parcel (parcel-bundler) はまだ Webpack の代わりにならない | パークのソフトウエア開発者ブログ|ICT技術(Java・Android・iPhone・C・Ruby)なら株式会社パークにお任せください

パークのソフトウエア開発者ブログ|ICT技術(Java・Android・iPhone・C・Ruby)なら株式会社パークにお任せください

開発の解決方法や新しい手法の情報を、パークのエンジニアが提供します。パークのエンジニアが必要な場合は、ぜひお気軽にお問い合わせ下さい。 株式会社パーク:http://www.pa-rk.co.jp/

※ 2017/12/13 追記

1.2.0 で試した結果を追記して取り消し線太字で示しています。
1.2.0 を入れて実行するとモジュールがない旨のエラーになりましたが、
1.1.0 を入れてから 1.2.0 を入れることでバンドルできるようになりました。
以降は node_modules を削除して npm i し直してもビルドが通っています。
よく分かりませんが似た現象に合った方は一旦 1.1.0 を入れてみてください。

また新しいモジュールバンドラーが出てきましたね。
Parcel はゼロコンフィギュレーションと高速さを謳っています。
実際、設定ファイルがありません。
Webpack の反動ですね。

ちかです

私は今のところ
ライブラリの UMD ビルドには Rollup を
アプリ開発には Webpack を
使っています。
(UMD ビルドを使うのは npm でパッケージを公開するときです。
 ⇒ npm で公開するブラウザー向けパッケージのファイル構成は Redux を参考にしよう

Parcel は Rollup とは競合せず Webpack と競合するように見えます。

私は基本的にゼロコンフィギュレーションを信じません。
やりたいことが毎回異なるからです。
たとえば、特定のファイルを除外する、モジュール x を y に読み替える、といった個別の要件は設定なしでは実現できないでしょう。
(そのような個別要件は現実に往々にして出てくるものです。)

でも Webpack の設定は必要以上に煩雑だと思います。
敷居が高過ぎます。
設定なしでも十分使えるけど設定を記述すれば細かいカスタマイズもできる、
ぐらいがいいと思うのですが。。。

参考(になるかどうか分かりませんが、私が上のように考える理由の説明になりそうな気がする記事)

 

さて
ものはためし。

Parcel (parcel-bundler 1.1.0) で
TypeScript, Babel, Stylus, PostCSS による変換をかけつつ
モジュールをバンドルさせてみました。

結論から言えばまだまだ Webpack の代わりにはならないと思います。
どんなに高速でも、やりたいことが実現できないのでは話になりません。
今後に期待しつつ現状は Webpack のまま様子見です。

PostCSS, PostHTML がしっかり動くようになれば使えそうな気がしてきました。
もう少し試行錯誤してみたいと思います。

以下、使用感です。

  • 入力ファイル(エントリポイント)は HTML でも JavaScript でも TypeScript でも CSS でも大丈夫でした。エントリポイントから <script src=> とか import from とか @import とかでインポートしているローカルファイルをバンドルしてくれます。
  • Pug 使いたかったけどサポートされていません。 Pug はparcel-plugin-pug を使えばバンドルできました。が、 Pug をエントリポイントにすると開発用サーバー (http://localhost:1234) で 404 が返ってくるようになりました (← 1.2.1 で修正されました)。
  • TypeScript は使えました。 HTML からスクリプトを読み込む箇所では <script src="xxx.ts"> のように TypeScript の拡張子 .ts で記述しなきゃいけないのは個人的に少し気持ち悪いです。が、気にする程のことでもありませんね。
  • TSLint はかけてくれませんでしたが、エディターがかけてくれますし自分で別途かけますし問題なし。
  • Babel は使えましたが新しい構文を使うとミニファイできませんでした。これについては Issue が(いくつも)上がっているのですぐ直ると思います。バンドル後に自分で uglify すれば OK(Parcel の機能でミニファイすると Parcel が追加する定型コードはミニファイされませんでしたが、自分で uglify すればこの点も解決しますし)1.2.0 ではミニファイできるようになっていました。
  • Stylus は使えませんでした。よく分かりませんがファイルの末尾で @import のエラーになりました。 @import は書いてないのだけど。。 1.2.0 では Stylus 使えました。
  • PostCSS はautoprefixer など一部のものは使えました。
  • Webpack でいう url-loader のようなインライン化機能は見当たりませんでした。 PostHTML / PostCSS で代替したいところですが posthtml-inline-assets を使おうとしたらエラーになりました。もう少し調べてみたいと思います。
  • Glob 形式による複数ファイルのインポートもできそうな雰囲気を醸し出しているのですが、試しに import * as subs from './submodules/**/*.ts' とか書いてみたけどダメでした。これはたぶん私の書き方が間違っているのだと思います。
  • 吐き出される dist/index.html から dist/xxx.js の読み込みはデフォルトでは <script src="\dist\xxx.js"> になりました(バックスラッシュはそのまま 1.2.0 ではバックスラッシュがスラッシュに修正されていました)。コマンドラインオプション --public-url . をつけることで <script src="xxx.js"> になりましたが、このオプションをつけると開発用サーバー (http://localhost:1234) でスクリプトの実行時エラーになりました。。
  • 複数の CSS ファイルをスクリプトからインポートすると 1 ファイルにマージされるのですが、インポートした順序は保たれないようです。このままでは使えません。。
  • import() による動的ロードは使えました。
  • TreeShaking はされていないようでした。

ホントはちゃんと Issue を検索してリンクも載せるべきなのでしょうけど、今現在の大きめの問題は数日後にはほとんど解決している可能性があるので、そこには力を入れませんでした。

開発が活発そうなので、時機を見てまた試してみたいと思います。

たくさんの機能追加圧力があると思うので(Webpack という重鎮と勝負するなら尚更)
ゼロコンフィギュレーションがツラくなっていくかもしれませんが
ゼロコンフィギュレーションに固執するあまりコマンドラインオプションを肥大化させるようなことはしないでほしいですね。

また、 Parcel という競合の登場によって Webpack 陣営が高速化や設定の簡素化にチカラを入れてくれたらいいなぁとか思います。

一応恥ずかしながら吐き出されたファイルも含め GitHub に置いておきましたのでご参考になれば。

ではでは~