Edited at

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


tl;dr


Published the Parcel v2 RFC!!!

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

所感としては、Parcelがバンドラからオールインワンの開発ツールへ進化を遂げたという感じでした。

Parcelの持ち味であるZero Configurationを維持しつつ、開発ツールとしてのすべての機能を拡張できるようになりました。

また、追加された設定ファイルもLinterのようなシンプルなものに設計されており、手軽に使用することができそうです。

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


パッケージ名がparcelへ変更

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

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


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



package.jsonの利用

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


Configuring Parcel



.parcelrc

Parcel v2の目玉、設定ファイルが利用できるようになります。

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

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

{

"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

既存の設定を継承します。

2つ以上を継承する場合は配列で指定できます。

{

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


.parcelrc#resolvers

パス解決パッケージを指定します。

Parcelでは無視されるURLによる依存解決などを拡張することができます。

{

"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

{

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


.parcelrc#bundler

複数ファイルをまとめるためのバンドラを指定します。

parcel-bundlerから名前が変わったのは、バンドラすら差し替えられる拡張性のためだったのでしょうか。

{

"bundler": "@parcel/bundler-v1"
}


.parcelrc#packager

異なるアセット(js, css, htmlなど)を1つのバンドルにまとめるためのパッケージャを指定します。

Parcelでは以下のパッケージャが提供されます。


  • @parcel/packager-html

  • @parcel/packager-js

  • @parcel/packager-css

  • @parcel/packager-wasm

  • @parcel/packager-raw

{

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


.parcelrc#optimizers

ファイルの最適化を行うオプティマイザを指定します。

ここはまだ公式のパッケージが未確定なようです。

{

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


.parcelrc#loaders

 ローダーは最終的なバンドルで書き出されるファイルを生成します。

このloaderはWebpackのloaderとは異なるものです。

Parcelでは以下のローダーが提供されます。


  • @parcel/loader-js

  • @parcel/loader-css

  • @parcel/loader-wasm

  • @parcel/loader-raw

{

"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

{

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


.parcelrc



プラグインの作成

.parcelrcの通り、様々な機能に対してプラグインを作成することができます。

Parcel v2では、プラグインの命名規則が厳格に定められています。

また、package.json#enginesに"parcel": "2.x"の記述がないとエラーが表示されます。

詳しくは以下。


Creating Plugins



プラグインAPI

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

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

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

詳しくは以下。


Plugin APIs