私たちのためのビルドツール。
Parcelは、新しいプロジェクトの開始から、反復とデバッグ、本番環境へのリリースまで、優れた開発エクスペリエンスから始まります。設定をあれこれいじったり、ベストプラクティスを維持するために何時間も費やす必要はもうありません。すぐに動作します!
ゼロコンフィグ
HTMLファイルから始めましょう。<script>
タグを追加します。CSSを追加することもできます。TypeScriptはどうでしょうか?SASS?画像?問題ありません。Parcelは期待通りにすぐに動作します。
Parcelは、HTML、CSS、JavaScriptなどのWebテクノロジーから、画像、フォント、ビデオなどのアセットまで、多くの言語とファイルタイプをすぐにサポートします。デフォルトで含まれていないファイルタイプを使用する場合、Parcelは必要なプラグインと開発依存関係を自動的にインストールします!
使い始める →<html>
<head>
<title>My First Parcel App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, World!</h1>
<script type="module" src="app.tsx"></script>
</body>
</html>
開発サーバー
Parcelには、すぐに使える開発サーバーが含まれています。parcel index.html
を実行して開始します。
HTTPSが必要ですか?--https
フラグを使用してParcelを実行すると、証明書が自動的に生成されます!または、必要に応じて独自の証明書を提供することもできます。
Parcelには、本番環境のシミュレーションに役立つ組み込みAPIプロキシもあります。
詳細はこちら →ホットリローディング
変更を加えると、Parcelはブラウザ内のコードを自動的に更新します。ページをリロードする必要はありません!
import React from 'react';
export function Greeting() {
return <h1>Hello world!</h1>;
}
ParcelはReact Fast RefreshとVue Hot Reloading APIと統合して、更新間のアプリケーションの状態を自動的に保持します。これにより、変更を加える際に、コンテキストから外れることなく、すぐにフィードバックを得ることができます。
詳細はこちら →診断
コードまたは設定でエラーが発生した場合、Parcelはターミナルとブラウザに分かりやすい診断情報を表示します。
すべてのエラーには、エラーが発生した正確な場所を指す構文強調表示されたコードフレームと、問題を解決する方法に関するヒントが含まれています。
多くの診断には、詳細を学ぶことができるドキュメントへのリンクも含まれています。
$ parcel index.html
Server running at http://localhost:1234
🚨 Build failed.
@parcel/core: Cannot resolve 'ract' from './index.js'
/dev/app/index.js:1:19
> 1 | import React from 'ract';
> | ^^^^^^
2 |
3 | function Test() {
@parcel/resolver-default: Cannot find module 'ract'
Did you mean 'react'?
非常に高速です。
Parcelは、ワーカスレッドを使用してコードを並列にビルドし、マシンのすべてのコアを利用します。すべてがキャッシュされるため、同じコードを2回ビルドすることはありません。ウォッチモードを使用しているように見えますが、Parcelを再起動した場合でも同様です!
ネイティブパフォーマンス
ParcelのJavaScriptコンパイラ、CSSトランスフォーマー、ソースマップの実装は、最大限のパフォーマンスを得るためにRustで記述されています。他のJavaScriptベースのツールよりも10〜20倍高速です!
ParcelのJavaScriptコンパイラはSWCをベースに構築されており、JavaScript、JSX、TypeScriptのトランスパイルを処理します。SWCの上に、Parcelは依存関係の収集、バンドリング、スコープホーティング、ツリーシェイキング、Nodeエミュレーション、ホットリローディングなどを実装しています。
ParcelのCSSトランスフォーマーとミニファイアは、Firefoxで使用されているブラウザレベルのCSSパーサーの上にRustで構築されています。他のJavaScriptベースのトランスフォーマーとミニファイアよりも100倍以上高速です。
マルチコア
Parcelは、すべてのコアにわたって作業を並列化し、最新のハードウェアを最大限に活用するマルチコアアーキテクチャを中心に設計されています。
個々のソースファイルの変換と、パッケージ化および出力バンドルの最適化が並列化されます。これらはすべて完全に自動化されており、プラグインの作成者やParcelと統合する他のツールによる作業は必要ありません。
信頼性の高いキャッシング
Parcelが行うすべての操作はキャッシュされます。変換、依存関係の解決、バンドリング、最適化など、あらゆるものがキャッシュされます。つまり、開発サーバーは瞬時に再起動し、同じコードを2回ビルドすることはありません。
Parcelは、ビルドに関与するすべてのファイル、設定、プラグイン、開発依存関係を自動的に追跡し、何かが変更された場合にキャッシュを詳細に無効にします。プロジェクトのサイズに関係なく、ミリ秒単位でファイルの変更を判断するために、低レベルのオペレーティングシステムAPIと統合します。
遅延開発ビルド
開発では、Parcelはファイルがブラウザで要求されるまでビルドを延期できます。つまり、実際に作業しているページのビルドを待つだけで済みます!プロジェクトに多くのエントリやコード分割ポイントがある場合、これにより開発サーバーの起動時間を大幅に短縮できます!
ページを要求すると、Parcelは一度にそのページのすべての依存関係を熱心にビルドするのに十分なほどスマートで、それらが要求されるのを待つ必要はありません。ネットワークウォーターフォールはありません!
詳細はこちら →自動本番最適化。
Parcelは、アプリケーション全体を自動的に本番環境向けに最適化します。これには、JavaScript、CSS、HTMLのツリーシェイキングとミニファイ、画像のリサイズと最適化、コンテンツハッシュ、自動コード分割などが含まれます。
ツリーシェイキング
Parcelは、ESモジュールとCommonJSの両方のツリーシェイキングをすぐにサポートしています!各モジュールのインポートとエクスポートを静的に分析し、使用されていないものをすべて削除します。
ツリーシェイキングは、動的なimport()
境界、共有バンドル、さらには言語間でも機能します!CSSモジュールを使用する場合、使用されていないクラスは自動的に削除されます。
import {add} from './math';
console.log(add(2, 3));
export function add(a, b) {
return a + b;
}
export function square(a) {
return a * a;
}
ミニファイ
Parcelには、JavaScript、CSS、HTML、SVGのミニファイアがすぐに含まれています!parcel build index.html
を実行するだけで、アプリケーション全体が自動的にビルドおよび最適化されます。
画像最適化
Parcelは、画像のリサイズ、変換、最適化をサポートしています!HTML、CSS、JavaScriptなどで画像ファイルを参照する際に、必要なフォーマットとサイズのパラメータを渡すだけで、Parcelが変換と最適化のプロセスを処理します。
同じソース画像の複数のサイズまたはフォーマットを、異なるデバイスまたはブラウザに要求することもできます!
詳細はこちら →<picture>
<source type="image/webp" srcset="image.jpg?as=webp&width=400, image.jpg?as=webp&width=800 2x">
<source type="image/jpeg" srcset="image.jpg?width=400, image.jpg?width=800 2x">
<img src="image.jpg?width=400" width="400">
</picture>
圧縮
GzipとBrotliを使用して、展開前にアプリケーションを圧縮します。
詳細はこちら →コード分割
アプリケーションの複数の部分が同じ共通モジュールに依存している場合、それらは別々のバンドルに自動的に重複除去されます。これにより、一般的に使用される依存関係をアプリケーションコードと並列にロードし、ブラウザによって個別にキャッシュできます!
CSSでもコード分割がサポートされています。JavaScriptからCSSをインポートすると、兄弟CSSバンドルが生成され、JSバンドルと並列にロードされます。
詳細はこちら →コンテンツハッシュ
Parcelは、すべての出力ファイルの名前にコンテンツハッシュを自動的に含めます。これにより、名前が変更されない限り出力は変更されないため、ブラウザの長期キャッシュが可能になります。
Parcelは、各エントリのマニフェストを使用して、参照されたすべてのバンドルを親に対して解決します。つまり、参照されたバンドルの変更は親のキャッシュを無効にせず、出力ファイルは再ビルドせずに場所間で移動できます。
詳細はこちら →任意のターゲットに出力
Parcelは、ターゲット環境に合わせてコードを自動的に変換します。最新のブラウザとレガシーブラウザのサポートから、ゼロコンフィグのJSXとTypeScriptのコンパイルまで、Parcelを使用すると、任意のターゲット、または複数のターゲットへのビルドが容易になります。
トランスパイル
Parcelは、ターゲットブラウザに合わせてJavaScriptとCSSを自動的にトランスパイルします!package.json
にbrowserslist
を宣言するだけで、Parcelは必要なものだけをトランスパイルします。
標準のJavaScriptに加えて、ParcelはJSX、TypeScript、Flow、およびprocess.envやfs.readFileSyncなどのNode.js機能を自動的に処理します。設定は不要です!
CSSに関しては、Parcelはlab()
カラー、論理プロパティ、CSSネスト構文などの最新の構文機能のトランスパイルをサポートし、ターゲットブラウザに必要なベンダープレフィックスを自動的に追加します。
より高度な制御が必要な場合、またはカスタム変換のサポートが必要な場合は、.babelrc
または.postcssrc
を追加するだけで、自動的に認識されます。
function DogName(props) {
return (
<span>
{props.dog?.name ?? 'Buddy'}
</span>
);
}
function DogName(props) {
var ref, ref1;
return /*#__PURE__*/ React.createElement(
"span",
null,
(ref1 = (ref = props.dog) === null || ref === void 0 ? void 0 : ref.name) !== null && ref1 !== void 0 ? ref1 : "Buddy"
);
}
差分バンドリング
<script type="module">
を使用する場合、Parcelはターゲットブラウザに応じて、古いブラウザ用のnomodule
フォールバックも自動的に生成します。
これにより、最新のブラウザを使用するほとんどのユーザーにとってバンドルサイズが大幅に小さくなります。もちろん、古いブラウザもサポートしています!
詳細はこちら →<script type="module" src="app.js"></script>
<script type="module" src="app.c9a6fe.js"></script>
<script nomodule="" src="app.f7d631.js"></script>
ワーカー
Parcelは、Webワーカー、サービスワーカー、ワークレットをすぐに使用できます!標準的なブラウザAPIを使用するだけで、Parcelが自動的に依存関係を処理します。
ブラウザのターゲットに応じて、ネイティブESモジュールワーカーを生成することもできます!
詳細はこちら →let worker = new Worker(
new URL('./worker.js', import.meta.url),
{type: 'module'}
);
navigator.serviceWorker.register(
new URL('./sw.js', import.meta.url),
{type: 'module'}
);
ライブラリ
Parcelは、複数のターゲット向けにライブラリを一度にビルドできます! 例えば、ソースコードを最新のESモジュール、レガシーCommonJSモジュール、TypeScript定義ファイルにすべて自動的にコンパイルできます。package.json
に関連するフィールドを追加するだけで、Parcelが処理します。
単一のコマンドで、パッケージ全体のモノレポをビルドすることもできます!🤯 parcel build packages/*
{
"name": "my-great-library",
"version": "1.0.0",
"source": "src/index.js",
"module": "dist/module.js",
"main": "dist/main.js",
"types": "dist/types.d.ts"
}
小規模なウェブサイトから大規模なアプリケーションまでスケーラブルです。
Parcelは、すぐに始めるために設定は不要です。しかし、アプリケーションが成長し、ビルド要件が複雑になるにつれて、ほぼあらゆる方法でParcelを拡張できます。
シンプルな設定?!
Parcelの設定は非常に簡単です。.parcelrc
は、globを使用してソースファイルをビルドパイプラインにマッチングするシンプルなJSONベースの設定形式です。デフォルトの設定を拡張して、カスタムファイルタイプを処理するプラグインを追加したり、デフォルトを上書きして拡張したりできます。
拡張
デフォルトの設定、またはコミュニティプリセットから始めましょう。
トランスフォーマー
個々のソースファイルをコンパイルし、依存関係を抽出します。
リゾルバー
依存関係をファイルパスまたは仮想モジュールに解決します。
ネイマー
出力ファイルの名前を決定します。
パッケージャー
複数の資産を単一の出力ファイルに結合します。
オプティマイザー
出力ファイルをミニファイ、最適化、変換します。
コンプレッサー
複数の形式で出力ファイルを圧縮およびエンコードします。
レポーター
ビルドの進行状況と完了時にイベントを受け取ります。
{"extends": ["@parcel/config-default"],
"transformers": { "*.svg": ["@parcel/transformer-svg-react"] },
"resolvers": ["@parcel/resolver-glob", "..."],
"namers": ["@company/parcel-namer", "..."],
"packagers": { "*.{jpg,png}": "parcel-packager-image-sprite" },
"optimizers": { "*.js": ["parcel-optimizer-license-headers"] },
"compressors": { "*.js": ["...", "@parcel/compressor-gzip"] },
"reporters": ["...", "parcel-reporter-manifest"]
}
強力なプラグイン
import {Transformer} from '@parcel/plugin';
export default new Transformer({
async transform({asset}) {
let source = await asset.getCode();
let sourceMap = await asset.getMap();
let {code, map} = compile(source, sourceMap);
asset.setCode(code);
asset.setMap(map);
return [asset];
}
});
Parcelにはあらゆる用途のプラグインがあります。実際、Parcelのコアは完全に言語に依存しません! ファイルの変換から、依存関係の解決、バンドリング、最適化まで、すべてカスタマイズ可能です。
各プラグインタイプには、その目的のために設計された特定の、明確に定義されたAPIがあります。すべてのオブジェクトとメソッドは完全に文書化されており、オートコンプリートと型安全のためのTypeScript定義が含まれています。
プラグインを開発する際に、ビルドを最初から実行しなくても、保存時にホットリロードされます!これにより、デバッグとイテレーションが非常に高速になります。 node_modules
内の依存関係でも動作します!
名前付きパイプライン
単一のビルドで同じタイプのファイルを複数の方法で変換したいですか?名前付きパイプラインを作成し、コード内でURLスキームとして使用します。
例えば、バンドルのコンパイル済みコンテンツをテキスト、データURL、ArrayBuffer、その他何でもインラインで表示できます!または、ドキュメントサイトを構築する場合、生成されたAPIドキュメントとファイルのソースコードの両方をインポートできます。可能性は無限大です。
詳細はこちら →{
"extends": "@parcel/config-default",
"transformers": {
"buffer:*": ["...", "parcel-transformer-buffer"]
}
}
import buffer from 'buffer:./logo.png';
パフォーマンスを重視した設計
Parcelのプラグインシステムは、パフォーマンスを念頭に置いてゼロから設計されています。プラグインは複数のスレッドで自動的に並列化され、Parcelのキャッシュと統合されます。プラグインが使用する依存関係や設定は自動的に追跡され、ビルドが無効になります。
詳細はこちら →API
ParcelのAPIを使用して、既存のビルドシステムにParcelを統合し、プログラムでビルドを実行できます。
詳細はこちら →診断
すべてのParcelプラグインは、強調表示されたコードフレーム、リッチMarkdownフォーマット、ヒント、ドキュメントリンクをサポートする統一された診断形式を使用します。
詳細はこちら →オープンソースで提供されています。
Parcelは、世界中の企業や個人のコードと資金による貢献によって支えられているオープンソースプロジェクトです。
💵 バックワー
バックワーは、任意の金額をParcelに寄付しています。バックワーになる →
😍 コントリビューター
コントリビューターは、Parcelのバグ修正や新機能の実装に役立っています。コントリビューターになる →