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 回だけ行われます。詳細については、「生産」セクションを参照してください。