Parcel

ウェブ向けのゼロコンフィグレーションビルドツール
  • ウェブ.
  • JavaScript.
  • CSS.
  • HTML.
  • TypeScript.
  • React.
  • 画像.
  • SASS.
  • SVG.
  • Vue.
  • ライブラリ.
  • Less.
  • CoffeeScript.
  • Node.
  • Stylus.
  • Pug.
  • Electron.
  • Elm.
  • WebGL.
  • 拡張機能.
  • GraphQL.
  • MDX.
  • XML.

Parcelは、優れたすぐに使える開発エクスペリエンスと、プロジェクトの開始から大規模な本番アプリケーションまで対応できるスケーラブルなアーキテクチャを組み合わせたものです。

使い始める GitHub
信頼されている企業

私たちのためのビルドツール。

Parcelは、新しいプロジェクトの開始から、反復とデバッグ、本番環境へのリリースまで、優れた開発エクスペリエンスから始まります。設定をあれこれいじったり、ベストプラクティスを維持するために何時間も費やす必要はもうありません。すぐに動作します!

ゼロコンフィグ

HTMLファイルから始めましょう。<script>タグを追加します。CSSを追加することもできます。TypeScriptはどうでしょうか?SASS?画像?問題ありません。Parcelは期待通りにすぐに動作します。

Parcelは、HTML、CSS、JavaScriptなどのWebテクノロジーから、画像、フォント、ビデオなどのアセットまで、多くの言語とファイルタイプをすぐにサポートします。デフォルトで含まれていないファイルタイプを使用する場合、Parcelは必要なプラグインと開発依存関係を自動的にインストールします!

使い始める →
index.html
<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はブラウザ内のコードを自動的に更新します。ページをリロードする必要はありません!

ParcelはReact Fast RefreshVue 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は、アプリケーション全体を自動的に本番環境向けに最適化します。これには、JavaScript、CSS、HTMLのツリーシェイキングとミニファイ、画像のリサイズと最適化、コンテンツハッシュ、自動コード分割などが含まれます。

ツリーシェイキング

Parcelは、ESモジュールとCommonJSの両方のツリーシェイキングをすぐにサポートしています!各モジュールのインポートとエクスポートを静的に分析し、使用されていないものをすべて削除します。

ツリーシェイキングは、動的なimport()境界、共有バンドル、さらには言語間でも機能します!CSSモジュールを使用する場合、使用されていないクラスは自動的に削除されます。

詳細はこちら →
index.js
import {add} from './math';

console.log(add(2, 3));
math.js
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が変換と最適化のプロセスを処理します。

同じソース画像の複数のサイズまたはフォーマットを、異なるデバイスまたはブラウザに要求することもできます!

詳細はこちら →
index.html
<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バンドルと並列にロードされます。

詳細はこちら →
Dashboard Profile React Lodash

コンテンツハッシュ

dashboard.js react.js dashboard.a96cdf.js

Parcelは、すべての出力ファイルの名前にコンテンツハッシュを自動的に含めます。これにより、名前が変更されない限り出力は変更されないため、ブラウザの長期キャッシュが可能になります。

Parcelは、各エントリのマニフェストを使用して、参照されたすべてのバンドルを親に対して解決します。つまり、参照されたバンドルの変更は親のキャッシュを無効にせず、出力ファイルは再ビルドせずに場所間で移動できます。

詳細はこちら →

小規模なウェブサイトから大規模なアプリケーションまでスケーラブルです。

Parcelは、すぐに始めるために設定は不要です。しかし、アプリケーションが成長し、ビルド要件が複雑になるにつれて、ほぼあらゆる方法でParcelを拡張できます。

シンプルな設定?!

Parcelの設定は非常に簡単です。.parcelrcは、globを使用してソースファイルをビルドパイプラインにマッチングするシンプルなJSONベースの設定形式です。デフォルトの設定を拡張して、カスタムファイルタイプを処理するプラグインを追加したり、デフォルトを上書きして拡張したりできます。

詳細はこちら →

拡張

デフォルトの設定、またはコミュニティプリセットから始めましょう。

トランスフォーマー

個々のソースファイルをコンパイルし、依存関係を抽出します。

リゾルバー

依存関係をファイルパスまたは仮想モジュールに解決します。

ネイマー

出力ファイルの名前を決定します。

パッケージャー

複数の資産を単一の出力ファイルに結合します。

オプティマイザー

出力ファイルをミニファイ、最適化、変換します。

コンプレッサー

複数の形式で出力ファイルを圧縮およびエンコードします。

レポーター

ビルドの進行状況と完了時にイベントを受け取ります。

.parcelrc
{
  "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ドキュメントとファイルのソースコードの両方をインポートできます。可能性は無限大です。

詳細はこちら →
.parcelrc
{
  "extends": "@parcel/config-default",
  "transformers": {
    "buffer:*": ["...", "parcel-transformer-buffer"]
  }
}
App.js
import buffer from 'buffer:./logo.png';

パフォーマンスを重視した設計

Parcelのプラグインシステムは、パフォーマンスを念頭に置いてゼロから設計されています。プラグインは複数のスレッドで自動的に並列化され、Parcelのキャッシュと統合されます。プラグインが使用する依存関係や設定は自動的に追跡され、ビルドが無効になります。

詳細はこちら →

API

ParcelのAPIを使用して、既存のビルドシステムにParcelを統合し、プログラムでビルドを実行できます。

詳細はこちら →

診断

すべてのParcelプラグインは、強調表示されたコードフレーム、リッチMarkdownフォーマット、ヒント、ドキュメントリンクをサポートする統一された診断形式を使用します。

詳細はこちら →

オープンソースで提供されています。

Parcelは、世界中の企業や個人のコードと資金による貢献によって支えられているオープンソースプロジェクトです。

🥇 ゴールドスポンサー

ゴールドスポンサーは、Parcelに月額1,000ドル以上を寄付しています。

🥈 シルバースポンサー

シルバースポンサーは、Parcelに月額500ドル以上を寄付しています。

🥉 ブロンズスポンサー

ブロンズスポンサーは、Parcelに月額100ドル以上を寄付しています。

💵 バックワー

バックワーは、任意の金額をParcelに寄付しています。バックワーになる →

😍 コントリビューター

コントリビューターは、Parcelのバグ修正や新機能の実装に役立っています。コントリビューターになる →