Parcel

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、画像などの読み込みもこれだけで動きます！ 👌

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