Parcel - 高速さが売りのWebアプリケーションバンドラー // MOONGIFT Archived

JavaScriptの周辺環境の進化は早く、一部はGulpと言われていたのがWebPackになったりして、どんどん新しい技術が出てきては廃れるといったことを繰り返しています。さらにここで紹介するのは心苦しいのですがParcelを知っておきましょう。とても簡単に使えるWebアプリケーションバンドラーです。

Parcelの使い方

例えば index.html を次のように書きます。

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

そして同じ階層に index.js を置きます。もちろん import に対応しています。

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

main();

インポートされる main.js の内容です。CSSをインポートできます。

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

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

CSSの内容は次のようになります。

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

CSSが取り込めるのでWebコンポーネントのように小さくまとまった部品を作る際にも利用できそうです。特徴としてはまず高速さがあります。公式サイトによれば、 browserify（22.98s）、webpack（20.71s）に対してparcel（9.98s）、さらにキャッシュを効かせて2.64sとなっています。

また、HTMLやJavaScriptだけでなくCSSまでまとめてバンドルしてくれるのが特徴です。BabelやPostCSS、PostHTMLといった変換系ライブラリにも対応しています。設定も殆どいりませんのですぐに使いこなせるでしょう。

Parcelはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

? Parcel parcel-bundler/parcel: ?? Blazing fast, zero configuration web application bundler