9/26（火）にParcel v1.10.0がリリースされました。
Parcel v1.10.0 is out! 🚀
— Parcel (@parceljs) 2018年9月25日
🐠 @babeljs 7 support
🌊 Automatic @flowtype
🌳 @elmlang out of the box
👔 Inline script and style extraction
🏷 HTML bundle loader
🔗 JSON LD
🗺 Load existing source maps
💪 Many bug fixes and improvements!
📝 Read more: https://t.co/hcmQC5XZUt
関連記事）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のサポート
- 既存のソースマップを読み込めるようになった
- ライブラリなどのソースマップも読み込めるようになったようです
- TypeScript 3.0に対応
- SugarSSに対応
-
--no-content-hashオプションの追加
いくつか詳しく見ていきましょう
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よりも遥かに小さいファイルを生成します。
インラインスクリプトとスタイルのサポート
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で動作するように設計されており1、その知名度は着実に広がっていると思います。
Parcel v2のREFも公開されたので、今後のParcelからも目が離せません。
-
NuxtのビルドツールはWebpackのラッパーみたいな感じなのでParcelとはだいぶ違いますが ↩