ターゲット

Parcel は、ソースコードを複数の異なる方法で同時にコンパイルできます。これらはターゲットと呼ばれます。たとえば、新しいブラウザを対象とする「モダン」ターゲットと、古いブラウザを対象とする「レガシー」ターゲットを用意できます。

エントリ

「エントリ」は、Parcel がソースコードのビルドを開始するファイルです。これらは CLI で指定するか、package.json の source フィールドを使用して指定できます。

`$ parcel <entries>`

Parcel コマンドには、1 つ以上のエントリファイルを CLI で指定できます。

$ parcel src/a.html src/b.html

エントリは、一度に複数のファイルを一致させるためのグロブとして指定できます。グロブがシェルによって解決されず、Parcel に直接渡されるように、グロブを単一引用符で囲むようにしてください。これにより、Parcel は、再起動することなく、グロブに一致する新しく作成されたファイルを自動的に取得できます。

$ parcel './src/*.html'

エントリはディレクトリにすることもでき、その場合は source フィールドを含む package.json ファイルが存在する必要があります。詳細については、下記を参照してください。

`package.json#source`

package.json の source フィールドには、1 つ以上のエントリファイルを指定できます。

{
  "source": "src/index.html"
}

{
  "source": ["src/a.html", "src/b.html"]
}

`package.json#targets.*.source`

package.json で宣言された任意のターゲット内の source フィールドには、そのターゲットに固有の 1 つ以上のエントリファイルを指定できます。たとえば、フロントエンドとバックエンドを同時に、またはデスクトップアプリとモバイルアプリを同時にビルドできます。ターゲットの設定の詳細については、下記を参照してください。

{
  "targets": {
    "frontend": {
      "source": "app/index.html"
    },
    "backend": {
      "source": "api/index.js"
    }
  }
}

ターゲット

Parcel は、解決された各エントリの依存関係を追跡し、1 つ以上のターゲットのソースコードをビルドします。ターゲットは、出力ディレクトリまたはファイルパス、およびコードのコンパイル方法に関する情報を指定します。

デフォルトでは、Parcel には dist フォルダに出力される単一の暗黙的なターゲットが含まれています。これは、--dist-dir CLI オプションを使用してオーバーライドできます。

$ parcel build src/index.html --dist-dir output

出力ディレクトリは、package.json で targets フィールドを使用して指定することもできます。これにより、--dist-dir CLI オプションがオーバーライドされます。

{
  "targets": {
    "default": {
      "distDir": "./output"
    }
  }
}

環境

出力場所に加えて、ターゲットは、コードが実行される「環境」に関する情報を指定します。これにより、Parcel にビルドする環境の種類 (例: ブラウザまたは Node.js) と、サポートする各エンジンのバージョンが通知されます。これは、トランスパイルする構文など、Parcel がコードをコンパイルする方法に影響します。

`package.json#browserslist`

ブラウザターゲットの場合、package.json の browserslist フィールドを使用して、サポートするブラウザを指定できます。使用状況統計または特定のブラウザのバージョン範囲でクエリできます。詳細については、browserslist ドキュメントを参照してください。

{
  "browserslist": "> 0.5%, last 2 versions, not dead"
}

`package.json#engines`

Node.js およびその他のターゲットの場合、package.json の engines フィールドを使用して、サポートするバージョンを指定できます。エンジンは、セマンティックバージョン範囲を使用して指定します。

{
  "engines": {
    "node": ">= 12"
  }
}

暗黙的な環境

あるファイルが別のファイルに依存している場合、環境は親から継承されます。ただし、アセットに依存する方法によって、環境の一部のプロパティが変更される場合があります。たとえば、サービスワーカーに依存する場合、コードが適切にコンパイルされるように、環境は自動的にサービスワーカーコンテキストに変更されます。

navigator.serviceWorker.register(new URL('service-worker.js', import.meta.url));

差分バンドル

「差分バンドル」とは、異なるターゲットに対して複数のバージョンのコードを出荷し、ブラウザがダウンロードする最適なバージョンを選択できるようにする考え方です。HTML ファイルで <script type="module"> 要素を使用し、環境で指定された一部のブラウザが ES モジュールをネイティブにサポートしていない場合、Parcel は自動的に <script nomodule> フォールバックも生成します。

<script type="module" src="app.js"></script>

は次のようにコンパイルされます

<script type="module" src="app.c9a6fe.js"></script>
<script nomodule src="app.f7d631.js"></script>

これにより、ES モジュールをサポートする最新のブラウザははるかに小さいバンドルをダウンロードでき、レガシーブラウザはフォールバックを使用して引き続きサポートされます。これにより、クラス、アロー関数、async/await などの最新の JavaScript 構文のトランスパイルを回避することで、バンドルサイズを大幅に削減し、ロード時間を改善できます。

これは、package.json の "browserslist" フィールドで宣言されているブラウザターゲットに基づいて自動的に行われます。browserslist が宣言されていない場合、またはすべてのブラウザターゲットが ES モジュールをネイティブにサポートしている場合は、nomodule フォールバックは生成されません。

複数のターゲット

複数の異なる環境に対してソースコードを同時にビルドするために、複数のターゲットを用意することができます。たとえば、アプリに「モダン」および「レガシー」ターゲットを、またはライブラリに ES モジュールおよび CommonJS ターゲットを準備することができます（下記参照）。

ターゲットは、package.json の targets フィールドを使用して設定されます。各ターゲットには、targets フィールドの下のキーとして指定された名前と、関連付けられた設定オブジェクトがあります。たとえば、各ターゲット内の engines フィールドを使用して、コンパイルされる環境をカスタマイズできます。

{
  "targets": {
    "modern": {
      "engines": {
        "browsers": "Chrome 80"
      }
    },
    "legacy": {
      "engines": {
        "browsers": "> 0.5%, last 2 versions, not dead"
      }
    }
  }
}

複数のターゲットが指定されている場合、出力はデフォルトで dist/${targetName} に書き込まれます (例: 上記の例では dist/modern と dist/legacy)。これは、各ターゲットの distDir フィールドを使用してカスタマイズできます。または、ターゲットに単一のエントリしかない場合は、ターゲット名に対応するトップレベルの package.json フィールドを使用して、出力の正確なファイル名を指定できます。

{
  "modern": "dist/modern.js",
  "legacy": "dist/legacy.js",
  "targets": {
    "modern": {
      "engines": {
        "browsers": "Chrome 80"
      }
    },
    "legacy": {
      "engines": {
        "browsers": "> 0.5%, last 2 versions, not dead"
      }
    }
  }
}

ライブラリのターゲット

Parcel には、ライブラリをビルドするための組み込みターゲットがいくつか含まれています。これらには、main、module、browser、および types フィールドが含まれます。

{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.js",
  "main": "dist/main.js",
  "module": "dist/module.js",
  "types": "dist/types.d.ts"
}

ライブラリターゲットは、デフォルトでは node_modules からの依存関係をバンドルしません。さらに、ライブラリではデフォルトで最小化が無効になっています。これらは、targets フィールドで適切なオプションを使用してオーバーライドできます（下記参照）。スコープホイスティングは、ライブラリターゲットでは無効にできません。

ライブラリターゲットは、ターゲットに応じて、ネイティブの ES モジュールまたは CommonJS のいずれかを自動的に出力します。

main – デフォルトでは、CommonJS を出力します。.mjs 拡張子が使用されている場合、または "type": "module" フィールドが指定されている場合は、代わりに ES モジュールが出力されます。
module – ES モジュールを出力します。
browser – main フィールドのブラウザ固有のオーバーライドです。CommonJS を出力します。

main および module は、browser ターゲットも使用可能な場合、または engines.node が指定されており、ブラウザターゲットが指定されていない場合は、デフォルトで Node 環境向けにコンパイルされます。それ以外の場合は、デフォルトでブラウザ環境向けにコンパイルされます。これは、ターゲット設定の context オプションを使用してオーバーライドできます (下記参照)。

Parcel にこれらのフィールドの 1 つを無視させるには、targets フィールドに false を指定します。

{
  "main": "unrelated.js",
  "targets": {
    "main": false
  }
}

Parcel を使用したライブラリの構築の概要については、Parcel を使用したライブラリの構築を参照してください。

ターゲットオプション

`コンテキスト`

'node' | 'browser' | 'web-worker' | 'service-worker' | 'worklet' | 'electron-main' | 'electron-renderer'

context プロパティは、ビルドする環境の種類を定義します。これにより、Parcel に、DOM、Node ファイルシステム API など、使用可能な環境固有の API が通知されます。

組み込みライブラリターゲット (例: main および module) の場合、context は自動的に推測されます。詳細については、上記のライブラリターゲットを参照してください。

`エンジン`

このターゲットのトップレベルの package.json#engines および browserslist フィールドで定義されたエンジンをオーバーライドします。ターゲット内の engines.browsers フィールドは、browserslist と同じように使用できます。詳細については、上記の環境および複数のターゲットを参照してください。

`出力形式`

'global' | 'esmodule' | 'commonjs'

出力するモジュールの種類を定義します。

global – ブラウザの <script> タグでロードできるクラシックなスクリプトです。ライブラリターゲットではサポートされていません。
esmodule – import および export ステートメントを使用する ES モジュールです。ブラウザの <script type="module"> タグでロードするか、Node.js または別のバンドラーでロードできます。
commonjs – require および module.exports を使用する CommonJS モジュールです。Node.js または別のバンドラーでロードできます。

組み込みライブラリターゲット (例: main および module) の場合、outputFormat は自動的に推測されます。ターゲットのトップレベルの package.json フィールドで定義されたファイル拡張子も、出力形式に影響を与える可能性があります。詳細については、上記のライブラリターゲットを参照してください。

`スコープホイスト`

スコープホイスティングを有効または無効にします。デフォルトでは、スコープホイスティングは本番環境ビルドで有効になっています。--no-scope-hoist CLI フラグを使用して、parcel build の実行時にスコープホイスティングを無効にできます。スコープホイスティングは、ターゲット設定で scopeHoist オプションを設定して無効にすることもできます。

`isLibrary`

true に設定すると、ターゲットは、ブラウザやその他のターゲット環境で直接使用されるのではなく、npm に公開され、別のツールによって消費されるライブラリとして扱われます。true の場合、outputFormat オプションは esmodule または commonjs のいずれかである必要があり、scopeHoist は false に設定しないでください。

組み込みライブラリターゲット (例: main および module) の場合、これは自動的に true に設定されます。詳細については、上記のライブラリターゲットを参照してください。

`最適化`

最適化（例：ミニファイ化）を有効または無効にします。正確な動作はプラグインによって決定されます。デフォルトでは、ライブラリターゲットを除き、本番ビルド（parcel build）時に最適化が有効になります。これは、--no-optimize CLIフラグまたはターゲット構成のoptimizeオプションを使用してオーバーライドできます。

`includeNodeModules`

node_modules をバンドルするか、外部として扱うかを決定します。デフォルトは、ブラウザターゲットの場合は true、ライブラリターゲットの場合は false です。可能な値は次のとおりです。

false – node_modules 内のファイルを一切含めません。
配列 – 含めるパッケージ名のリスト。次の例では、reactのみがバンドルされます。node_modules 内の他のすべてのファイルは除外されます。
```
{
  "targets": {
    "main": {
      "includeNodeModules": ["react"]
    }
  }
}
```
オブジェクト – パッケージ名とブール値のマッピング。パッケージがリストされていない場合は、含まれます。次の例では、react以外のすべての node_modules がバンドルされます。
```
{
  "targets": {
    "main": {
      "includeNodeModules": {
        "react": false
      }
    }
  }
}
```

`sourceMap`

ソースマップを有効または無効にし、ソースマップオプションを設定します。デフォルトでは、ソースマップは有効になっています。これは、--no-source-maps CLIフラグを使用するか、ターゲット構成の sourceMap オプションを false に設定することでオーバーライドできます。

sourceMap オプションは、次のオプションを持つオブジェクトも受け入れます。

inline – ソースマップを個別の出力ファイルとしてリンクするのではなく、データURLとしてバンドルにインライン化するかどうか。
inlineSources – 元のソースコードを sourceRoot からロードするのではなく、ソースマップにインライン化するかどうか。これは、本番環境向けにブラウザターゲットをビルドするときに、デフォルトで true に設定されます。
sourceRoot – 元のソースコードをロードするURL。これは、組み込みのParcel開発サーバーを使用している場合は開発中に自動的に設定されます。それ以外の場合は、プロジェクトルートからのバンドルへの相対パスがデフォルトになります。

`source`

ターゲットの package.json のトップレベルの source フィールドをオーバーライドします。これにより、各ターゲットが異なるエントリを持つことができます。詳細については、package.json#targets.*.sourceを参照してください。

`distDir`

このターゲットでコンパイルされたバンドルが書き込まれる場所を設定します。デフォルトでは、ターゲットが1つしかない場合は dist、複数のターゲットがある場合は dist/${targetName} になります。詳細については、ターゲットを参照してください。

`publicUrl`

このバンドルが実行時にロードされるベースURLを設定します。distDir からのバンドルの相対パスが自動的に追加されます。publicUrl は、完全修飾URL（例：https://some-cdn.com/）または、バンドルがWebサイトと同じドメインからロードされる場合は絶対パス（例：/public）のいずれかになります。

デフォルトでは、publicUrl は / です。これは、HTMLファイルやその他のアセットが同じ場所にデプロイされている場合に適切なデフォルトです。アセットを別の場所にデプロイする場合は、publicUrl を設定する必要がある可能性が高くなります。パブリックURLは、--public-url CLIオプションを使用して設定することもできます。

ほとんどの場合、バンドルは親バンドルから子バンドルへの相対パスを使用してロードされます。これにより、再ビルドせずにデプロイを新しい場所に移動できます（例：ステージングビルドを本番環境に昇格させる）。publicUrl は、相対パスが不可能な場合（例：HTML内）に使用されます。