Parcel を始める


はじめに
Parcel は、以前の開発者が使用していたパッケージャーとは異なる Web アプリケーション パッケージャー (バンドラー) です。マルチコア処理を活用して非常に高速なパフォーマンスを実現し、何も設定する必要はありません。
最初に Yarn または npm を使用して Parcel をインストールします:
Yarn:

yarn global add parcel-bundler

npm:

npm install -g parcel-bundler

次のコマンドを使用して、プロジェクト ディレクトリに package.json ファイルを作成します。

yarn init -y
or
npm init -y

Parcel では、任意の種類のファイルをエントリ ポイントとして使用できますが、HTML または JavaScript ファイルから始めるのが適切です。相対パスを使用してメイン JavaScript ファイルを HTML にリンクする場合、Parcel はこれも処理し、その参照を出力ファイルの URL に置き換えます。
次に、index.html ファイルとindex.js ファイルを作成します。

<html>
<body>
  <script src="./index.js"></script>
</body>
</html>
console.log("hello world");

Parcel には開発サーバーが組み込まれており、ファイルを変更するとアプリケーションを自動的に再構築し、モジュールのホット リプレースをサポートしているため、迅速に開発できます。エントリ ファイルを指定するだけです:

parcel index.html

次に、ブラウザで http://localhost:1234/ を開きます。 -p <ポート番号> オプションを使用してデフォルトのポートをオーバーライドすることもできます。
独自のサーバーがない場合、またはアプリケーションが完全にクライアントでレンダリングされている場合は、開発サーバーを使用してください。独自のサーバーがある場合は、監視モードで Parcel を実行できます。このようにして、ファイルが変更されると、Parcel は引き続きファイルを自動的に再構築し、モジュールのホット リプレースをサポートしますが、Web サーバーは起動しません。

parcel watch index.html

実稼働用にビルドする準備をしているとき、ビルド モードは監視をオフにし、ビルドは 1 回だけ行われます。詳細については、「生産」セクションを参照してください。