元記事） 📦 Parcel v1.10.0 — Babel 7, Flow, Elm, and more! 🚀

関連記事）Parcel v1.5.0 〜 v1.8.0で追加された機能
関連記事）Parcel v1.9.0 がリリースされました 🎉

新機能

v1.10.0で追加された主な機能は次のとおりです。

• Babel7に対応
• Flow Typeの自動検知
• Elm言語のサポート
• インラインスクリプトとスタイルのサポート
• HTMLをJavaScriptでimportできるようになった
  • import('./page.html')
• JSON LDのサポート
  • JSON-LD
• 既存のソースマップを読み込めるようになった
  • ライブラリなどのソースマップも読み込めるようになったようです
• TypeScript 3.0に対応
• SugarSSに対応
• --no-content-hashオプションの追加

Changelog

いくつか詳しく見ていきましょう

Babel 7のサポート

8月末にリリースしたばかりのBabel 7ですが、Parcel v1.10.0で早くもサポートしました。
Babel 7を使うことによってビルドのパフォーマンスがやや向上するのに加えて、新しいBabelの機能を使えるようになります。

また、Parcel v1.10.0ではBabel 6で作られた既存のプロジェクトもサポートしています。
babel-coreがpackage.jsonで指定されている場合はBabel 6のプロジェクトとして認識されます。
既存プロジェクトをBabel 7へアップグレードするには、package.jsonからbabel-coreを削除し、@babel/coreを追加してください。そして、.babelrc内のプラグインをBabel 7対応のものに変更してください。

新規プロジェクトの場合には、.babelrcに書かれているプラグインがBabel 6/7どちらに依存しているかを検出してbabel-coreか@babel/coreのいずれかが自動的にインストールされます。

さらに、インストールされていないBabelプラグインをParcelが自動でインストールするようになりました。.babelrcへプラグインを書いておくだけでParcelが必要なプラグインを自動でインストールします。

Flow Typeの自動検知

通常、Flowを使用する際には、ビルド時に型情報を取り除くBabelプラグインを追加する必要があります。Parcel v1.10.0では、この処理が自動化されます。

Parcelは一番上のコメントに@flowが含まれるファイルを自動的に検出し、型情報を削除します。
これによって、型情報を付加するのに手作業で設定を行う必要がなくなりました。

Elmのサポート

Elm言語はJavaScriptへコンパイルされる関数型プログラミング言語です。Parcel v1.10.0では設定を書かずにElmを使用することができます。

拡張子が.elmのファイルを検知するとParcelは必要なパッケージをインストールし、プロジェクトを初期化しelm.jsonを生成します。
Elmのコンパイル時にはライブリロードが利用できます。

プロダクションビルド時にParcelは高度な最適化を自動的に有効にしてJavaScriptのMinifierよりも遥かに小さいファイルを生成します。

How to optimize Elm code

インラインスクリプトとスタイルのサポート

Parcel v1.8.0で複数エントリーポイントに対応したことにより、SPA以外での使いみちも広がったParcelですが、v1.10.0でインラインスクリプトとスタイルに対応しました。

<div style="background-image: url('./logo.jpg')">Logo</div>

としたときでもファイルの依存が解決され、正しくビルドされるようになりました。

また、AltJSやCSSプリプロセッサも利用可能で、type属性を指定することによりインラインスクリプト・スタイルがコンパイルされます。

<script type="application/ts">
  // TypeScriptコードを書く
</script>

終わりに

いまのところはMediumのエントリーの意訳みたいな感じですが、後日、実際に使った感想など追記したいと思います。

いま結構な流行になりつつあるNuxtもZero Configurationで動作するように設計されており¹、その知名度は着実に広がっていると思います。

Parcel v2のREFも公開されたので、今後のParcelからも目が離せません。