Parcel v2が面白そう

[豊田高専 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/nit_toyota)、18日目の記事です。

## Parcel とは

Parcelは主にブラウザ向けのバンドラとして登場し、Webpackのような複雑~~怪奇~~な設定ファイルが不要ということでWebフロントエンド界隈を賑わせました。

https://qiita.com/bitrinjani/items/b08876e0a2618745f54a

とはいえ、結局Webpackを打倒することはできずにいたように思います。

React周辺のツールを見ても明らかです。
WebフロントエンドはReact一強時代([npmtrends](https://www.npmtrends.com/@angular/core-vs-react-vs-vue-vs-svelte))のなか、[create-react-app](https://create-react-app.dev/)も、[Next.js](https://nextjs.org/)もWebpackが利用されています。

## Rust/Go製ツールの台頭

AltJSとしてTypeScriptが当たり前のように使われるJavaScript開発ですが、TypeScriptのトランスパイラ"tsc"はかなり遅いです。

そこで、[esbuild](https://esbuild.github.io/)(Go)や[swc](https://swc.rc/)(Rust)が登場します。
いずれも圧倒的な速度で動作します。（型チェックをしていないので高速という話もあります）

また、[Rome](https://rome.tools/)もRustで実装する方針に寄った模様です。

https://qiita.com/rana_kualu/items/dcadf11b3e97db1dded6

また、esbuildを利用したバンドラとして、[Snowpack](https://www.snowpack.dev/)や、Vue.js作者であるEvan You氏の[Vite](https://vitejs.dev/)も出てきました。
~~Snowpackは流行りませんでしたが、~~Viteは[rollup.js](https://rollupjs.org/guide/en/)のプラグインが流用でき新たにプラグインを作る必要がないので、Vue.js界隈(Nuxt.js)だけでなくSvelte界隈(SvelteKit)にも利用されています。

## ここまで出てきたやつをまとめる

- Parcel (v1)
    - バンドラ
    - 設定不要でWebpackを打倒するかに思われたがそんなことはなかった
- Webpack
    - バンドラ
    - 設定が複雑
    - 1,2年前は一強？
- rollup.js
    - バンドラ
    - Webpackがアプリ向きならこっちはライブラリ向き
- tsc
    - TypeScript公式のトランスパイラ
    - バンドルはできないし、遅いけど型チェック（と`.d.ts`の生成）ができる
- esbuild
    - Go製のトランスパイラ
    - 速くてバンドルもできちゃうけど型チェックはしてくれない
- swc
    - Rust製のトランスパイラ
    - 速くてバンドルもできちゃうけど型チェックは**まだ**してくれない
        - 対応したいIssue [#571](https://github.com/swc-project/swc/issues/571)
- Rome
    - トランスパイル、バンドル、Lint、フォーマット、minify、テスト etc...
    - ツールを一つにまとめたい
- Snowpack
    - esbuildを利用したバンドラ
- Vite
    - esbuildを利用したバンドラ
    - Vue.js作者Evan You氏
    - rollup.jsのライブラリが利用できる

# 本題 Parcel (v2)

## だいたい5個の面白そうポイント

### 1. 作者

作者はAdobeのエンジニア Devon Govett氏。Adobeのデザインシステム[Spectrum](https://spectrum.adobe.com/)のReact実装、[React Spectrum](https://react-spectrum.adobe.com/)なども携わっている。

### 2. Flowを使ってる

型チェッカーとしてTypeScriptではなくFlowを採用している。

### 3. Rust製CSS Minifier

CSSのminifierとして[parcel-css](https://github.com/parcel-bundler/parcel-css)を作成しており、これがRust製。

https://twitter.com/devongovett/status/1459943738978062339?s=20

意訳
> このCSSコンパイラ、まるで本物のプロジェクトみたいに思えてくるで…2万行突破したもん😅
> まだ、速く、小さくなってんだよね🚀

### 4. alt chokidar

chokidarはNode.jsのファイル変更監視ライブラリで、多くのプロジェクトで利用されてきましたが、Parcel v2に合わせて[@parcel/watcher](https://github.com/parcel-bundler/watcher)がリリースされました。

これはC++で書かれており、各OSのネイティブAPIが直接利用されます。
それ故に高速で、JSのプロセスを圧迫しないなどメリットが有るようです。

https://twitter.com/devongovett/status/1459194606621503493

### 5. 公式で対応しているファイル種の多さ

ざっと以下がドキュメントに載ってます

JavaScript/HTML/CSS/SVG/TypeScript/CoffeeScript/Sass/Stylus/Less/SugarSS/Vue/Elm/JSON/TOML/GraphQL/YAML/GLSL/Pug/MDX/XML

個人的に好きなSvelteも、コミュニティ発のプラグインが公式になる動きもあり対応はまだ増えるかもしれません。
https://github.com/orlov-vo/parcel-transformer-svelte/issues/28

## おわりに

Parcel v2はリリースから2ヶ月経っていますが、まだ動きがありそうなので要チェックです。

とはいえ、Viteがかなり強力なので厳しいかもしれません。

### おまけ

Svelte作者(Rich Harris)とParcel作者(Devon Govett)の会話（ツイート）

https://twitter.com/devongovett/status/1467359204193275904

意訳

Rich Harris
> Parcelはすげぇらしいけど、エコシステムがなぁ。
> いろんなフレームワーク(おそらくNuxt.jsやSvelteKit)がViteを選んでる。
> 良くも悪くも、このグラフのように無視できない。

Devon Govett
> 悲しい