小包換算

変換
多くのバンドラーでは、リソースを変換するためにプラグインをインストールして構成する必要がありますが、Parcel にはすぐに使用できる多くの組み込みの変換とトランスレーターが備わっています。箱から出して。 Babel を使用して JavaScript、PostCSS を使用した CSS、および PostHTML を使用した HTML を変換できます。 Parcel は、構成ファイル (例: .babelrc 、 .postcssrc ) がモジュール内で見つかると、これらの変換を自動的に実行します。
これはサードパーティのノードモジュールでも機能します。構成ファイルがパッケージの一部として公開されている場合、変換は自動的にオンになり、そのモジュールにのみ適用されます。変換が必要なモジュールのみを処理するため、パッケージ化が迅速に行えます。また、特定のファイルを含めたり除外したりするために変換を手動で構成したり、アプリケーションで使用するためにサードパーティのコードがどのように構築されているかを知ったりする必要がないことも意味します。
Babel
Babel は、広範なプラグイン エコシステムを備えた人気のある JavaScript トランスパイラーです。 Babel を Parcel とともに使用する方法は、Babel を単独で使用する場合も、他のパッケージャーと組み合わせて使用​​する場合も同様です。
プリセットとプラグインをアプリケーションにインストールします:

yarn add babel-preset-env

次に、.babelrc ファイルを作成します:

{
  "presets": ["env"]
}

PostCSS
PostCSS は、autoprefixer、cssnext、CSS Modules などのプラグインを使用して CSS を変換するツールです。次のいずれかの名前を使用して構成ファイルを作成することで、Parcel で PostCSS 構成を使用できます: .postcssrc (JSON)、.postcssrc.js、または postcss.config.js。
アプリケーションにプラグインをインストールします:

yarn add postcss-modules autoprefixer

次に、.postcssrc ファイルを作成します。

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

プラグインは plugins オブジェクトのキーで指定され、オプション定義ではオブジェクトの値が使用されます。プラグインにオプションがない場合は、単に true に設定します。
Autoprefixer 、 cssnext およびその他のツールのターゲット ブラウザーは、 .browserslistrc ファイルで指定できます。

> 1%
last 2 versions

CSS モジュールは、トップレベルのモジュール キーを使用して、少し異なる方法で有効になります。これは、Parcel が CSS モジュールの特別なサポートを必要とするためです。CSS モジュールは、JavaScript バンドルに含めるためのオブジェクトもエクスポートするためです。プロジェクトに postcss-modules をインストールする必要があることに注意してください。
PostHTML
PostHTML は、プラグインを使用して HTML を変換するツールです。 PostHTML を使用するように Parcel を構成するには、.posthtmlrc (JSON)、posthtmlrc.js、または posthtml.config.js のいずれかの名前を使用して構成ファイルを作成します。
アプリケーションにプラグインをインストールします:

yarn add posthtml-img-autosize

次に、.posthtmlrc ファイルを作成します:

{
  "plugins": {
    "posthtml-img-autosize": {
      "root": "./images"
    }
  }
}

プラグインはpluginsオブジェクトのキーで指定されており、オプション定義ではオブジェクトの値を使用します。プラグインにオプションがない場合は、単に true に設定します。
TypeScript
TypeScript は、通常の JavaScript にコンパイルできる JavaScript 型のスーパーセットで、最新の ES2015 機能もサポートしています。 TypeScript は追加の設定を行わずに変換できます。