開発

Parcel には、ホットリロード、HTTPS、API プロキシなどをサポートする開発サーバーが組み込まれています。

開発サーバー

Parcel の組み込み開発サーバーは、parcel serve のショートカットであるデフォルトの parcel コマンドを実行すると自動的に起動します。デフォルトでは、http://localhost:1234 でサーバーが起動します。ポート 1234 がすでに使用されている場合は、フォールバックポートが使用されます。Parcel が起動した後、開発サーバーがリッスンしている場所がターミナルに出力されます。

開発サーバーは、CLI オプションで指定できるいくつかのオプションをサポートしています。

-p, --port – デフォルトのポートを上書きします。PORT 環境変数を使用してポートを設定することもできます。
--host – デフォルトでは、開発サーバーはすべてのインターフェースでの接続を受け入れます。これを上書きして、特定のホストからの接続のみを受け入れるように指定できます。
--open – Parcel の起動後に、デフォルトのブラウザでエントリを自動的に開きます。別のブラウザを開くためにブラウザ名を渡すこともできます。例：--open safari。

ホットリロード

コードを変更すると、Parcel は変更されたファイルを自動的に再ビルドし、ブラウザでアプリを更新します。デフォルトでは、Parcel はページを完全にリロードしますが、場合によってはホットモジュール置換 (HMR) を実行する場合があります。 HMR は、ページ全体を更新することなく、ランタイム時にブラウザでモジュールを更新することにより、開発エクスペリエンスを向上させます。これは、コードに小さな変更を加えてもアプリケーションの状態を保持できることを意味します。

CSS の変更は、ページのリロードを必要とせずに HMR 経由で自動的に適用されます。これは、React (Fast Refresh 経由) や Vue など、HMR サポートが組み込まれたフレームワークを使用する場合にも当てはまります。

フレームワークを使用していない場合は、module.hot API を使用して HMR をオプトインできます。これにより、ページがリロードされるのを防ぎ、代わりに更新がその場で適用されます。 module.hot は開発環境でのみ使用できるため、使用する前に存在するかどうかを確認する必要があります。

if (module.hot) {
  module.hot.accept();
}

HMR は、モジュールのコードを置き換え、それを再評価し、そのすべての親と一緒に再評価することによって機能します。このプロセスをカスタマイズする必要がある場合は、module.hot.accept および module.hot.dispose メソッドを使用してフックできます。これらを使用すると、モジュールの新しいバージョン内で状態を保存および復元できます。

module.hot.dispose は、そのモジュールが置き換えられようとしているときに呼び出されるコールバックを受け入れます。提供された data オブジェクトにモジュールの新しいバージョンで復元する状態を保存したり、新しいバージョンで再作成されるタイマーなどのものをクリーンアップするために使用します。

module.hot.accept は、そのモジュールまたはその依存関係のいずれかが更新されたときに実行されるコールバック関数を受け入れます。 module.hot.data に保存されているデータを使用して、モジュールの古いバージョンから状態を復元するために使用できます。

if (module.hot) {
  module.hot.dispose(function (data) {
    // module is about to be replaced.
    // You can save data that should be accessible to the new asset in `data`
    data.updated = Date.now();
  });

  module.hot.accept(function (getParents) {
    // module or one of its dependencies was just updated.
    // data stored in `dispose` is available in `module.hot.data`
    let { updated } = module.hot.data;
  });
}

開発ターゲット

開発サーバーを使用する場合、一度にビルドできるターゲットは 1 つだけです。デフォルトでは、Parcel は最新のブラウザをサポートする開発ターゲットを使用します。これは、古いブラウザ向けの最新の JavaScript 構文のトランスパイルが無効になっていることを意味します。

古いブラウザでテストする必要がある場合は、--target CLI オプションを提供して、ビルドするターゲットを選択できます。たとえば、package.json で定義されている「レガシー」ターゲットをビルドするには、--target legacy を使用します。明示的なターゲットが定義されておらず、package.json に browserslist のみがある場合は、--target default を使用して暗黙的なデフォルトターゲットを使用できます。これにより、ソースコードは本番環境の場合と同様にトランスパイルされます。

詳細は、ターゲットのドキュメントを参照してください。

遅延モード

開発では、開発サーバーが起動する前にアプリ全体のビルドが完了するまで待つのはイライラする可能性があります。これは、多くのページを持つ大規模なアプリで作業する場合に特に当てはまります。 1 つの機能のみを開発している場合は、他のすべての機能に移動しない限り、他のすべての機能のビルドを待つ必要はありません。

--lazy CLI フラグを使用して、ブラウザでリクエストされるまでファイルのビルドを延期するように Parcel に指示できます。これにより、開発ビルド時間を大幅に短縮できます。サーバーはすぐに起動し、初めてページに移動すると、Parcel はそのページに必要なファイルのみをビルドします。別のページに移動すると、そのページはオンデマンドでビルドされます。以前にビルドされたページに戻ると、すぐに読み込まれます。

parcel 'pages/*.html' --lazy

これは、個別のエントリだけでなく、動的な import() でも機能します。そのため、動的に読み込まれた機能を持つページがある場合、その機能はアクティブ化されるまでビルドされません。リクエストされると、Parcel はリクエストされるのを待たずに、すべての依存関係も積極的にビルドします。

キャッシング

Parcel はビルドしたすべてのものをディスクにキャッシュします。開発サーバーを再起動すると、Parcel は最後に実行されてから変更されたファイルのみを再ビルドします。 Parcel は、ビルドに関連するすべてのファイル、構成、プラグイン、および開発の依存関係を自動的に追跡し、何かが変更されたときにキャッシュをきめ細かく無効にします。たとえば、構成ファイルを変更すると、その構成に依存するすべてのソースファイルが再ビルドされます。

デフォルトでは、キャッシュはプロジェクト内の .parcel-cache フォルダーに保存されます。このフォルダーを .gitignore (または同等のもの) に追加して、リポジトリにコミットされないようにする必要があります。 --cache-dir CLI オプションを使用して、キャッシュの場所を上書きすることもできます。

--no-cache フラグを使用してキャッシュを無効にすることもできます。これはキャッシュからの * 読み込み * のみを無効にすることに注意してください - .parcel-cache フォルダーは引き続き作成されます.

HTTPS

開発中に HTTPS を使用する必要がある場合があります。たとえば、認証 Cookie に特定のホスト名を使用したり、混合コンテンツの問題をデバッグしたりする必要がある場合があります。 Parcel の開発サーバーは、HTTPS をそのままサポートしています。自動的に生成された証明書を使用するか、独自の証明書を提供できます。

自動的に生成された自己署名証明書を使用するには、--https CLI フラグを使用します。初めてページを読み込むときは、ブラウザでこの証明書を手動で信頼する必要がある場合があります。

parcel src/index.html --https

カスタム証明書を使用するには、--cert および --key CLI オプションを使用して、それぞれ証明書ファイルと秘密鍵を指定する必要があります。

parcel src/index.html --cert certificate.cert --key private.key

API プロキシ

Web アプリを開発するときに実際の本番環境をより適切にエミュレートするために、.proxyrc、.proxyrc.json、または .proxyrc.js ファイルで別のサーバー (たとえば、実際の API サーバーまたはローカルテストサーバー) にプロキシする必要があるパスを指定できます。

`.proxyrc` / `.proxyrc.json`

この JSON ファイルでは、すべてのキーが URL が照合されるパターンであり、値が http-proxy-middleware オプションオブジェクトであるオブジェクトを指定します。

.proxyrc

{
  "/api": {
    "target": "http://localhost:8000/",
    "pathRewrite": {
      "^/api": ""
    }
  }
}

この例では、http://localhost:1234/api/endpoint が http://localhost:8000/endpoint にプロキシされます.

`.proxyrc.js`

より複雑な構成の場合、.proxyrc.js ファイルを使用すると、connect 互換のミドルウェアを接続できます。最初に、プロジェクトに http-proxy-middleware をインストールしてください。この例は、上記の .proxyrc バージョンと同じ動作をします.

.proxyrc.js

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    createProxyMiddleware("/api", {
      target: "http://localhost:8000/",
      pathRewrite: {
        "^/api": "",
      },
    })
  );
};

これを ES モジュールとして記述する場合は、.proxyrc.mjs ファイルを使用するか、package.json で "type": "module" オプションを使用することで実行できます。

ファイルウォッチャー

最適なキャッシングと開発エクスペリエンスをサポートするために、Parcel は各オペレーティングシステムの低レベルファイル監視機能と統合する C++ で記述された非常に高速なウォッチャーを利用します。このウォッチャーを使用して、Parcel はプロジェクトルート内のすべてのファイル (すべての node_modules を含む) を監視します。これらのファイルからのイベントとメタデータに基づいて、Parcel は再ビルドする必要があるファイルを決定します.

ファイルウォッチに関する既知の問題

安全な書き込み

一部のテキストエディタと IDE には、「安全な書き込み」と呼ばれる機能があり、ファイルのコピーを作成して保存時に名前を変更することでデータの損失を防ぎます。ただし、この機能はファイル更新の自動検出を妨げる可能性があります。

安全な書き込みを無効にするには、以下のオプションを使用します

Sublime Text 3: ユーザー設定に atomic_save: "false" を追加します。
IntelliJ: 設定で検索を使用して「安全な書き込み」を見つけて無効にします。
Vim: 設定に :set backupcopy=yes を追加します。
WebStorm：環境設定 > 外観と動作 > システム設定で 「安全な書き込みを使用する」 のチェックを外します。
vis：設定に :set savemethod inplace を追加します。

Linux：デバイスに空き容量がありません

プロジェクトのサイズとオペレーティングシステムの監視制限によっては、Linux で Parcel を実行しているときにこのエラーが発生する可能性があります。この問題を解決するには、sysctl の fs.inotify 設定を変更し、max_user_watches により高い値を設定します。

/etc/sysctl.conf に次の行を追加または変更することで、これを行うことができます。

fs.inotify.max_queued_events = 16384
fs.inotify.max_user_instances = 128
fs.inotify.max_user_watches = 16384

このエラーが解決しない場合は、値をさらに大きくしてみてください。

Dropbox、Googleドライブ、またはその他のクラウドストレージソリューションの使用

Parcel プロジェクトは、Dropbox や Google ドライブなどを使用してクラウドに同期されるフォルダに配置しないことをお勧めします。これらのソリューションは、監視機能に干渉し、不要な再構築を引き起こす可能性のある、多くのファイルシステムイベントを作成します。

自動インストール

デフォルトで含まれていない言語またはプラグインを使用する場合、Parcel は必要な依存関係をプロジェクトに自動的にインストールします。たとえば、.sass ファイルを含めると、Parcel は @parcel/transformer-sass プラグインをインストールします。これが発生すると、ターミナルにメッセージが表示され、新しい依存関係が package.json の devDependencies に追加されます。

Parcel は、ロックファイルに基づいてプロジェクトで使用されているパッケージマネージャーを自動的に検出します。たとえば、yarn.lock が見つかった場合、Yarn がパッケージのインストールに使用されます。ロックファイルが見つからない場合は、システムにインストールされているものに基づいてパッケージマネージャーが選択されます。現在サポートされているパッケージマネージャーは、優先順位の高い順に次のとおりです。

自動インストールは、デフォルトでは開発中のみ行われます。本番ビルド中に依存関係が見つからない場合、ビルドは失敗します。--no-autoinstall CLI フラグを使用して、開発中の自動インストールを無効にすることもできます。