📦 Parcel v1.10.0 がリリースされました 🎉

9/26（火）に**Parcel v1.10.0**がリリースされました。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Parcel v1.10.0 is out! 🚀<br><br>🐠 <a href="https://twitter.com/babeljs?ref_src=twsrc%5Etfw">@babeljs</a> 7 support<br>🌊 Automatic <a href="https://twitter.com/flowtype?ref_src=twsrc%5Etfw">@flowtype</a><br>🌳 <a href="https://twitter.com/elmlang?ref_src=twsrc%5Etfw">@elmlang</a> out of the box<br>👔 Inline script and style extraction<br>🏷 HTML bundle loader <br>🔗 JSON LD<br>🗺 Load existing source maps<br>💪 Many bug fixes and improvements!<br><br>📝 Read more: <a href="https://t.co/hcmQC5XZUt">https://t.co/hcmQC5XZUt</a></p>&mdash; Parcel (@parceljs) <a href="https://twitter.com/parceljs/status/1044621197013475328?ref_src=twsrc%5Etfw">2018年9月25日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

> 元記事） [📦 Parcel v1.10.0 — Babel 7, Flow, Elm, and more! 🚀](https://medium.com/@devongovett/parcel-v1-10-0-babel-7-flow-elm-and-more-c20736553573)

関連記事）[Parcel v1.5.0 〜 v1.8.0で追加された機能](http://simoothie-cafe.hatenablog.com/entry/2018/05/06/123752)
関連記事）[Parcel v1.9.0 がリリースされました 🎉](https://qiita.com/simochee/items/14a178786524cfc507fb)

# 新機能

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

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

> [Changelog](https://github.com/parcel-bundler/parcel/blob/master/CHANGELOG.md)

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

## 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](http://elm-lang.org/)言語はJavaScriptへコンパイルされる関数型プログラミング言語です。Parcel v1.10.0では設定を書かずにElmを使用することができます。

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

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

> [How to optimize Elm code](http://elm-lang.org/0.19.0/optimize)

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

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

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

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

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

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

# 終わりに

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

いま結構な流行になりつつある[Nuxt](https://ja.nuxtjs.org/)もZero Configurationで動作するように設計されており[^1]、その知名度は着実に広がっていると思います。

[Parcel v2のREFも公開された](https://qiita.com/simochee/items/40b46836b87a5711c401)ので、今後のParcelからも目が離せません。

[^1]: NuxtのビルドツールはWebpackのラッパーみたいな感じなのでParcelとはだいぶ違いますが