ja.parceljs.org Open in urlscan Pro
76.76.21.123  Public Scan

URL: https://ja.parceljs.org/
Submission: On August 04 via automatic, source certstream-suspicious — Scanned from DE

Form analysis 1 forms found in the DOM

<form class="languages">
  <select class="language-dropdown" onchange="location = this.options[this.selectedIndex].value + location.pathname;">
    <option class="en" value="https://en.parceljs.org">English</option>
    <option class="es" value="https://es.parceljs.org">Español</option>
    <option class="fr" value="https://fr.parceljs.org">Français</option>
    <option class="it" value="https://it.parceljs.org">Italiano</option>
    <option class="ja" value="https://ja.parceljs.org" selected="">日本語</option>
    <option class="ko" value="https://ko.parceljs.org">한국어</option>
    <option class="pl" value="https://pl.parceljs.org">Polski</option>
    <option class="pt" value="https://pt.parceljs.org">Português</option>
    <option class="ru" value="https://ru.parceljs.org">Русский</option>
    <option class="uk" value="https://uk.parceljs.org">Українська</option>
    <option class="zh" value="https://zh.parceljs.org">简体中文</option>
    <option class="zh-tw" value="https://zh-tw.parceljs.org">繁體中文</option>
  </select>
</form>

Text Content

👕 最高の Tシャツとパーカーを買って、Parcel を応援してください!全利益が、 私達 Open Collective の事業の支えになります。 ✨

驚くほど速く、設定不要なWebアプリケーションバンドラー


はじめる GitHub
English Español Français Italiano 日本語 한국어 Polski Português Русский Українська
简体中文 繁體中文
GitHub ドキュメント


🚀 驚くほど高速なパッケージング速度

Parcel はマルチコアコンパイルを有効にするためにワーカープロセスを使い、再起動後でも高速に動くようにファイルシステムのキャッシュを持ちます。


📦 全アセットをまとめます

Parcel は設定不要で、JS、CSS、HTML、ファイルアセットなどをサポートします。プラグインは不要です。


🐠 全自動変換

コードを、プラグイン無しで自動変換します。必要に応じて、Babel、PostCSS、PostHTML を使い、node_modules ですら変換可能です。


✂️ コードの分割も設定不要

動的な import() シンタックスで、Parcel はアウトプットバンドルを自動で分割し、必要に応じて初期ロードすることができます。


🔥 ホットモジュールリプレイスメント

Parcel は、開発時に変えた変更に応じてブラウザー上でモジュールを自動アップデートします。もちろん、設定不要です。


🚨 人に優しいエラーログ

Parcel は、エラーになった時、問題の箇所を特定するのに便利なシンタックスハイライト付きのコードブロックを表示します。


HELLO WORLD

アプリケーションで必要な最初の HTML ファイルで入門してみましょう。Parcel は、アプリケーション全体の依存性をここから追従します。

✏️ index.html

<html>
<body>
  <script src="./index.js"></script>
</body>
</html>

🛠 index.js

// import another component
import main from './main';

main();

🛠 main.js

// import a CSS module
import classes from './main.css';

export default () => {
  console.log(classes.main);
};

💅 main.css

.main {
  /* Reference an image file */
  background: url('./images/background.png');
  color: red;
}

parcel index.html とタイプするだけで、開発用サーバーが立ち上がります。JavaScript、CSS、画像などの読み込みもこれだけで動きます!
👌


ベンチマーク

バンドラー 処理時間 browserify 22.98s webpack 20.71s parcel 9.98s parcel - with cache
2.64s

1726個のモジュールを含む一般的なサイズのアプリ(未圧縮時6.5MB)で、4つの物理コアを持つ MacBook Pro(2016) を利用。

はじめる


ドキュメント

 * 🚀 はじめる
 * 📦 アセット
 * ✂️ コード分割

 * 🔥 ホットモジュールリプレイスメント
 * ✨ プロダクション
 * 🖥 CLI


LINKS

 * GitHub
 * npm
 * Twitter

Copyright © 2023 Devon Govett. This website is open source.