Parcel2 への移行
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ CLI オプションは影響ある変更多め
◆ 設定を package.json に移さないといけないものもある
◆ CSS 関係は新しいパッケージあり
◆ 互換性より速度優先みたいなので動かない場合あり
◆ Parcel1 用の PostCSS を使い続けられる
◆ ソースコードを変更せず移行するなら変えないほうが良さそう
◆ 設定を package.json に移さないといけないものもある
◆ CSS 関係は新しいパッケージあり
◆ 互換性より速度優先みたいなので動かない場合あり
◆ Parcel1 用の PostCSS を使い続けられる
◆ ソースコードを変更せず移行するなら変えないほうが良さそう
Parcel2 が出てもうしばらく経ってるので Parcel1 を使っていたものを Parcel2 に置き換えました
変更点は少ないようで多かったです
https://parceljs.org/getting-started/migration/
単純に index.js だけ指定していたらあまり影響はなさそうですが CLI オプションを色々指定していたら変更する場所も多めです
--out-file の指定はなくなって package.json の main に指定するものになっています
複数ある場合はターゲット機能を使って指定します
targets の中に好きな名前のキーをつけて設定を書けるのですが --out-file に相当する出力先はトップレベルで指定が必要です
package.json のトップレベルは他のキーも多いです
private みたいな名前だと重複するので書けないです
ログイン中用のアプリと非ログイン中用のアプリで分けたり 通常ユーザー用と管理者ユーザ用を分けたり ページごとにバンドルを作成したりとかです
こういう場合にはまとめて watch や build をしたいです
ですが まとめて実行するとエラーになりました
はっきりとした原因はわからなかったですが 調べていると共通のモジュールがあるとダメみたいな情報もありました
同じプロジェクトな以上 共通のモジュールが無い方が珍しいです
現状だとターゲット機能にあまり価値がないです
並行して Parcel のプロセスを複数実行すれば問題ないですがプロセス数が増えて重くなりますし これだと Parcel1 のときと変わらないです
デフォルトだと Parcel1 の PostCSS の設定どおりに動くようになっています
このパッケージをインストールして package.json に設定を書けば置き換わります
CSS Modules やネスト構文などにも対応してるようで これを使えば PostCSS はなくせそうです
置き換えてみたのですが動かない部分がありました
高速になったようですが互換性はいまいちのようです
高速化のため最適化しすぎているみたいで PostCSS だと出力されていたものがなくなっているようです
また tree shaking を使うみたいなので
みたいに動的なものとも相性が悪そうです
CSS 関係は手動で変えない限りは古いものを使い続けられるので私は Parcel1 の PostCSS のままにしてます
毎回新しいのが使えるよってメッセージが出てきて邪魔ですけど
node_modules のパッケージでも package.json を見て判断してるらしく そこで一部のパッケージが Parcel の期待するルールに従ってなかったみたいです
パッケージ側で CJS/ESM 等いくつかのバージョンが提供されていれば別のを import することでうまく動くかもしれません
私の場合は esm 版に変えてみたら動くものがありました
パッケージ側で回避手段が用意されていればいいですが そうでないと自分でそのパッケージだけ別にビルドしたり結構面倒になります
変更点は少ないようで多かったです
https://parceljs.org/getting-started/migration/
単純に index.js だけ指定していたらあまり影響はなさそうですが CLI オプションを色々指定していたら変更する場所も多めです
out-file
少し困ったのが --out-file です--out-file の指定はなくなって package.json の main に指定するものになっています
複数ある場合はターゲット機能を使って指定します
{
"foo": "foo.js",
"targets": {
"foo": {
"distDir": "dist-foo"
}
}
}
targets の中に好きな名前のキーをつけて設定を書けるのですが --out-file に相当する出力先はトップレベルで指定が必要です
package.json のトップレベルは他のキーも多いです
private みたいな名前だと重複するので書けないです
複数ターゲットの実行
ターゲット機能が追加されたので エントリポイントが複数あるものを扱いやすくなると期待してましたログイン中用のアプリと非ログイン中用のアプリで分けたり 通常ユーザー用と管理者ユーザ用を分けたり ページごとにバンドルを作成したりとかです
こういう場合にはまとめて watch や build をしたいです
ですが まとめて実行するとエラーになりました
はっきりとした原因はわからなかったですが 調べていると共通のモジュールがあるとダメみたいな情報もありました
同じプロジェクトな以上 共通のモジュールが無い方が珍しいです
現状だとターゲット機能にあまり価値がないです
並行して Parcel のプロセスを複数実行すれば問題ないですがプロセス数が増えて重くなりますし これだと Parcel1 のときと変わらないです
CSS
CSS 関係は @parcel/transformer-css という新しいパッケージが使えるようになりましたデフォルトだと Parcel1 の PostCSS の設定どおりに動くようになっています
このパッケージをインストールして package.json に設定を書けば置き換わります
CSS Modules やネスト構文などにも対応してるようで これを使えば PostCSS はなくせそうです
置き換えてみたのですが動かない部分がありました
高速になったようですが互換性はいまいちのようです
高速化のため最適化しすぎているみたいで PostCSS だと出力されていたものがなくなっているようです
また tree shaking を使うみたいなので
html`<p class=${styles["prefix-" + name]}>text</p>`
みたいに動的なものとも相性が悪そうです
CSS 関係は手動で変えない限りは古いものを使い続けられるので私は Parcel1 の PostCSS のままにしてます
毎回新しいのが使えるよってメッセージが出てきて邪魔ですけど
実行時エラー
他にもビルドはできたのに実行時にエラーが出るケースもありましたnode_modules のパッケージでも package.json を見て判断してるらしく そこで一部のパッケージが Parcel の期待するルールに従ってなかったみたいです
パッケージ側で CJS/ESM 等いくつかのバージョンが提供されていれば別のを import することでうまく動くかもしれません
私の場合は esm 版に変えてみたら動くものがありました
パッケージ側で回避手段が用意されていればいいですが そうでないと自分でそのパッケージだけ別にビルドしたり結構面倒になります