2020/06/21追記：
2020/6/19にParcel 2のベータ版が公開されました。
🚀 Parcel 2 beta 1 has been released!
— Devon Govett (@devongovett) June 18, 2020
🌳 Improved tree shaking
🗺 20x faster source map builds
#️⃣ Improved content hashing
🚨 Resolver diagnostics
📊 More accurate bundle reports
🐞 Tons of bugfixes!
📝 Read more: https://t.co/hMGtOKEOs3
🌎 New website! https://t.co/SWaS5OvWIA
それに伴い、Parcel 2でいくつかの開発環境を構築する記事を書いたので、そちらも併せてご覧ください！
tl;dr
Published the Parcel v2 RFC!!!
8/28、Parcel v2のRFCが公開されました 🎉🎉🎉
⚡️ Super excited to publish the @parceljs v2 RFC today! Check it out and leave feedback! 🔥
— Devon Govett (@devongovett) 2018年8月28日
📝 Read here: https://t.co/gjhAw74wPL
💬 Comment on the PR: https://t.co/l6ktGCm160
HUGE thanks to @jamiebuilds for writing it up, and putting up with me over the last few months! 🙂
所感としては、Parcelがバンドラからオールインワンの開発ツールへ進化を遂げたという感じでした。
Parcelの持ち味であるZero Configurationを維持しつつ、開発ツールとしてのすべての機能を拡張できるようになりました。
また、追加された設定ファイルもLinterのようなシンプルなものに設計されており、手軽に使用することができそうです。
それでは、8/30 20:00時点でのParcelの新機能や仕様の変更箇所をご紹介します。
パッケージ名がparcelへ変更
これまで、parcel-bundlerとしていたパッケージ名が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です。
- 1.xでは
-
--autoinstall [npm/yarn], --no-autoinstall- こちらも明示できるようになりました。さらに、yarnとnpmも選択可能になりました。デフォルトはyarn.lockがなければnpmです。
-
--cache <dir>, --no-cache- キャッシュについても明示できるようになり、ディレクトリを指定できるようになりました。
-
--mode <mode>- 独自にモードを設定できます。デフォルトはNODE_ENVです。
- エイリアスがあり、
--development (--dev)、--production (--prod)、--testが用意されています。
package.jsonの利用
Parcelの設定をpackage.jsonに記述できるようになるようです。
.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
既存の設定を継承します。
２つ以上を継承する場合は配列で指定できます。
{
"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など）を１つのバンドルにまとめるためのパッケージャを指定します。
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の通り、様々な機能に対してプラグインを作成することができます。
Parcel v2では、プラグインの命名規則が厳格に定められています。
また、package.json#enginesに"parcel": "2.x"の記述がないとエラーが表示されます。
詳しくは以下。
プラグインAPI
Parcel v2ではプラグインAPIがどの機能でも共通のフォーマットで作成できます。
import { NameOfPluginType } from '@parcel/plugin';
export default new NameOfPluginType({
async methodName(opts: JSONObject): Promise<JSONObject> {
return result;
},
});
詳しくは以下。