Parcelは、Web用のゼロ構成ビルドツールです。すぐに使用できる優れた開発エクスペリエンスとスケーラブルなアーキテクチャを組み合わせて、プロジェクトをゼロから大量生産アプリケーションに移行します。
Parcelv2.6.0がリリースされました。このリリースに含まれる新機能には、Reactのエラーオーバーレイ、HMRでのソースマップのサポート、CSSモジュールでのローカルスコープの変数、および多くのバグ修正と改善が含まれます。
エラーオーバーレイに反応する
パーセルには、Reactのランタイムエラーオーバーレイが含まれるようになりました。これは、強調表示されたコードフレームを含む優れたスタックトレースを表示し、Reactフレームワークの内部を自動的に省略します。
エラーからエディターを起動する
ReactランタイムエラーオーバーレイとParcelのビルドエラーオーバーレイの両方で、コードフレーム内のファイル名または行番号をクリックして、コードエディターでその行に直接ジャンプできるようになりました。Parcelは、すでに実行またはインストールされているプロセスに基づいて、サポートされている15を超えるエディターのリストから使用しているエディターを自動的に検出します。これにより、ブラウザでのデバッグとエディタでの対応するコードの間を簡単に移動できます。
HMRソースマップ
HMRとソースマップがParcelで連携するようになりました。これは、ブラウザをリロードせずにコードに変更が加えられた場合、エラースタックトレースとコンソールログに、コンパイルされた出力ではなく、ソースコードの正しい行と列が表示されるようになったことを意味します。これにより、デバッグが容易になります。
CSSモジュールのローカルスコープ変数
Parcelは、CSS変数やその他の破線の識別子（たとえば@font-palette-values）をローカライズするためのオプションの方法を提供するようになりました。有効にすると、ParcelはCSS変数の名前を変更して、他のファイルと競合しないように、CSS変数が含まれているファイル名のハッシュを含めます。別のファイルで定義された変数を参照する必要がある場合は、これを行うための新しいCSS構文拡張機能があります。
.button { background: var(--accent-color from "./vars.module.css"); }また、 Parcelは未使用のCSS変数をツリーシェイクできるようになりました。JavaScriptツリーの揺れと同じように、Parcel@keyframesは各ファイルで使用されているCSSクラス、ID、および現在の変数を追跡し、未使用の宣言を自動的に削除します。シンボルはグローバルではなくローカルで宣言および参照されるため、これはCSSモジュールにのみ適用されます。これは、CSS変数が多数ある設計システムやその他のライブラリにとって非常に便利な機能であり、使用可能なコンポーネントの一部のみが実際にアプリケーションで使用される場合があります。
この機能の詳細については、更新されたドキュメントを確認してください。
カスタムCSSモジュールの命名パターン
Parcelは、CSSモジュールのコンパイル時に使用される命名パターンを構成する方法もサポートするようになりました。デフォルトでは、Parcelは各クラス名の前にそれを定義するファイル名のハッシュを付けます。package.jsonで構成することにより、@parcel/transformer-cssカスタムの命名パターンを定義できるようになりました。
{ "@parcel/transformer-css": { "cssModules": { "pattern": "my-company-[name]-[hash]-[local]" } } }詳細については、ドキュメントを確認してください。
npmパッケージのグロブ
@parcel/resolver-globプラグインを使用すると、glob指定子を使用して一度に複数のファイルをインポートできます。以前は、プロジェクト内のローカルファイルのみをサポートしていましたが、npmパッケージからglobをインポートできるようになりました。
import * as locales from '@company/pkg/i18n/*.js'; console.log(locales.en.message);詳細については、ドキュメントを参照してください。
もっと
compilerOptionsParcel v2.6.0には、Vueとの<script setup>サポート、より多くの画像形式のサポート、SWCの更新、Elmエラーメッセージの改善など、他の多くの小さな機能、バグ修正と改善も含まれています。詳細については、完全なリリースノートを参照してください。