📦 Parcel v2のRFCが公開されました 🎉

**2020/06/21追記：**

2020/6/19にParcel 2のベータ版が公開されました。

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">🚀 Parcel 2 beta 1 has been released!<br><br>🌳 Improved tree shaking<br>🗺 20x faster source map builds<br>#️⃣ Improved content hashing<br>🚨 Resolver diagnostics<br>📊 More accurate bundle reports<br>🐞 Tons of bugfixes!<br><br>📝 Read more: <a href="https://t.co/hMGtOKEOs3">https://t.co/hMGtOKEOs3</a><br>🌎 New website! <a href="https://t.co/SWaS5OvWIA">https://t.co/SWaS5OvWIA</a></p>&mdash; Devon Govett (@devongovett) <a href="https://twitter.com/devongovett/status/1273685386020024320?ref_src=twsrc%5Etfw">June 18, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

それに伴い、Parcel 2でいくつかの開発環境を構築する記事を書いたので、そちらも併せてご覧ください！

> [いろいろ試そう Parcel 2@beta - Qiita](https://qiita.com/simochee/items/367ff4b90cbbfd0055c5)

# tl;dr

* [ParcelのCLIがかなり変わったよ](#パッケージ名がparcelへ変更)
* [設定ファイルを**任意で**作れるようになったよ](#parcelrc)

# Published the Parcel v2 RFC!!!

8/28、Parcel v2のRFCが公開されました 🎉🎉🎉

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">⚡️ Super excited to publish the <a href="https://twitter.com/parceljs?ref_src=twsrc%5Etfw">@parceljs</a> v2 RFC today! Check it out and leave feedback! 🔥<br><br>📝 Read here: <a href="https://t.co/gjhAw74wPL">https://t.co/gjhAw74wPL</a><br>💬 Comment on the PR: <a href="https://t.co/l6ktGCm160">https://t.co/l6ktGCm160</a><br><br>HUGE thanks to <a href="https://twitter.com/jamiebuilds?ref_src=twsrc%5Etfw">@jamiebuilds</a> for writing it up, and putting up with me over the last few months! 🙂</p>&mdash; Devon Govett (@devongovett) <a href="https://twitter.com/devongovett/status/1034488820186603521?ref_src=twsrc%5Etfw">2018年8月28日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

所感としては、Parcelがバンドラからオールインワンの開発ツールへ進化を遂げたという感じでした。
Parcelの持ち味であるZero Configurationを維持しつつ、開発ツールとしてのすべての機能を拡張できるようになりました。
また、追加された設定ファイルもLinterのようなシンプルなものに設計されており、手軽に使用することができそうです。

それでは、8/30 20:00時点でのParcelの新機能や仕様の変更箇所をご紹介します。

# パッケージ名が`parcel`へ変更

これまで、`parcel-bundler`としていたパッケージ名が`parcel`へ変更になるようです。

また、これまではグローバルなCLIツールのような立ち位置でしたが、プロジェクトごとにインストールして使うように紹介されています。

> [Parcel CLI](https://github.com/parcel-bundler/parcel/blob/master/PARCEL_2_RFC.md#parcel-cli)

# 実行時の引数・フラグの変更

これまでParcelは`parcel serve`、`parcel build`のように用途によってオプションを指定していましたが、Parcel v2からは引数として指定するようになるようです。

```
$ parcel src/*.pug --serve --watch --port 3000
```

また、いくつかのフラグも変更になります。

* `--[no-]source-map`
    * 1.xでは`--no-source-map`のみだったものがOn/Offを明示できるようになりました。デフォルトは本番ビルド以外でOnです。
* `--autoinstall [npm/yarn], --no-autoinstall`
    * こちらも明示できるようになりました。さらに、yarnとnpmも選択可能になりました。デフォルトはyarn.lockがなければnpmです。
* `--cache <dir>, --no-cache`
    * キャッシュについても明示できるようになり、ディレクトリを指定できるようになりました。
* `--mode <mode>`
    * 独自にモードを設定できます。デフォルトはNODE_ENVです。
    * エイリアスがあり、`--development (--dev)`、`--production (--prod)`、`--test`が用意されています。

> [CLI Args & Flags](https://github.com/parcel-bundler/parcel/blob/master/PARCEL_2_RFC.md#cli-args--flags)

# `package.json`の利用

Parcelの設定を`package.json`に記述できるようになるようです。

> [Configuring Parcel](https://github.com/parcel-bundler/parcel/blob/master/PARCEL_2_RFC.md#packagejson)

# `.parcelrc`

Parcel v2の目玉、設定ファイルが利用できるようになります。
もちろん、Parcelの持ち味である**Zero Configuration**は健在で、設定ファイルがなければ標準の設定で利用できます。

すべての設定を書くと以下のようになります。

```json
{
  "extends": ["@parcel/config-default"],
  "resolvers": ["@parcel/resolver-default"],
  "bundler": "@parcel/bundler-default",
  "transforms": {
    "*.vue": ["@parcel/transform-vue"],
    "*.scss": ["@parcel/transform-sass"],
    "*.js": ["@parcel/transform-babel"],
    "*.css": ["@parcel/transform-postcss"],
    "*.html": ["@parcel/transform-posthtml"],
  },
  "packagers": {
    "*.js": "@parcel/packager-js",
    "*.css": "@parcel/packager-css",
    "*.html": "@parcel/packager-html",
    "*.wasm": "@parcel/packager-wasm",
    "*.raw": "@parcel/packager-raw"
  },
  "optimizers": {
    "*.js": ["@parcel/optimizer-uglify"],
    "*.css": ["@parcel/optimizer-cssnano"],
    "*.html": ["@parcel/optimizer-htmlnano"],
    "*.{png,jpg,jpeg,svg,...}": ["@parcel/optimizer-imagemin"]
  },
  "loaders": {
    "*.js": "@parcel/loader-js",
    "*.wasm": "@parcel/loader-wasm"
  },
  "reporters": ["@parcel/reporter-detailed"]
}
```

それぞれ見ていきましょう。

## `.parcelrc#extends`

既存の設定を継承します。
２つ以上を継承する場合は配列で指定できます。

```json
{
  "extends": "@parcel/config-default",
  "extends": "../.parcelrc",
  "extends": ["@parcel/config-default", "@company/parcel-config"]
}
```

## `.parcelrc#resolvers`

パス解決パッケージを指定します。
Parcelでは無視されるURLによる依存解決などを拡張することができます。

```json
{
  "resolvers": ["@parcel/resolver-v1"]
}
```

## `.parcelrc#transforms`

変換パッケージを指定します。
Parcelでは以下のコンパイラ、トランスパイラが提供されます。

* `@parcel/transform-babel`
* `@parcel/transform-coffeescript`
* `@parcel/transform-graphql`
* `@parcel/transform-json`
* `@parcel/transform-json5`
* `@parcel/transform-less`
* `@parcel/transform-posthtml`
* `@parcel/transform-postcss`
* `@parcel/transform-pug`
* `@parcel/transform-raw`
* `@parcel/transform-reason`
* `@parcel/transform-rust`
* `@parcel/transform-stylus`
* `@parcel/transform-toml`
* `@parcel/transform-typescript`
* `@parcel/transform-vue`
* `@parcel/transform-wasm`
* `@parcel/transform-webmanifest`
* `@parcel/transform-yaml`

```json
{
  "transforms": {
    "*.js": ["@parcel/transform-babel"]
  }
}
```

## `.parcelrc#bundler`

複数ファイルをまとめるためのバンドラを指定します。
`parcel-bundler`から名前が変わったのは、バンドラすら差し替えられる拡張性のためだったのでしょうか。

```json
{
  "bundler": "@parcel/bundler-v1"
}
```

## `.parcelrc#packager`

異なるアセット（js, css, htmlなど）を１つのバンドルにまとめるためのパッケージャを指定します。
Parcelでは以下のパッケージャが提供されます。

* `@parcel/packager-html`
* `@parcel/packager-js`
* `@parcel/packager-css`
* `@parcel/packager-wasm`
* `@parcel/packager-raw`

```json
{
  "packagers": {
    "*.js": ["@parcel/packager-js"]
  }
}
```

## `.parcelrc#optimizers`

ファイルの最適化を行うオプティマイザを指定します。
ここはまだ公式のパッケージが未確定なようです。

```json
{
  "optimizers": {
    "*.js": ["@parcel/optimizer-uglify"]
  }
}
```

## `.parcelrc#loaders`

　ローダーは最終的なバンドルで書き出されるファイルを生成します。
このloaderは**Webpackのloaderとは異なるものです**。
Parcelでは以下のローダーが提供されます。

* `@parcel/loader-js`
* `@parcel/loader-css`
* `@parcel/loader-wasm`
* `@parcel/loader-raw`

```json
{
  "loaders": {
    "*.js": "@parcel/loader-js",
    "*.wasm": "@parcel/loader-wasm"
  }
}
```

## `.parcelrc#reporters`

レポーターはParcelで発生したイベントによってコンソールへ表示したりファイルを生成したりできます。
Parcelでは以下のレポーターが提供されます。

* `@parcel/reporter-pretty`
* `@parcel/reporter-detailed`
* `@parcel/reporter-graph`
* `@parcel/reporter-visualizer`

```json
{
  "reporters": ["@parcel/reporter-detailed"]
}
```

> [.parcelrc](https://github.com/parcel-bundler/parcel/blob/master/PARCEL_2_RFC.md#parcelrc)

# プラグインの作成

`.parcelrc`の通り、様々な機能に対してプラグインを作成することができます。
Parcel v2では、プラグインの命名規則が厳格に定められています。
また、`package.json#engines`に`"parcel": "2.x"`の記述がないとエラーが表示されます。

詳しくは以下。

> [Creating Plugins](https://github.com/parcel-bundler/parcel/blob/master/PARCEL_2_RFC.md#creating-plugins)

# プラグインAPI

Parcel v2ではプラグインAPIがどの機能でも共通のフォーマットで作成できます。

```javascript
import { NameOfPluginType } from '@parcel/plugin';

export default new NameOfPluginType({
  async methodName(opts: JSONObject): Promise<JSONObject> {
    return result;
  },
});
```

詳しくは以下。

> [Plugin APIs](https://github.com/parcel-bundler/parcel/blob/master/PARCEL_2_RFC.md#plugin-apis)