JavaScriptの周辺環境の進化は早く、一部はGulpと言われていたのがWebPackになったりして、どんどん新しい技術が出てきては廃れるといったことを繰り返しています。
さらにここで紹介するのは心苦しいのですがParcelを知っておきましょう。とても簡単に使えるWebアプリケーションバンドラーです。
Parcelの使い方
例えば index.html を次のように書きます。
<html><body><script src="./index.js"></script></body></html>
そして同じ階層に index.js を置きます。もちろん import に対応しています。
// import another componentimport main from './main';main();
インポートされる main.js の内容です。CSSをインポートできます。
// import a CSS moduleimport 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-bundler/parcel: ?? Blazing fast, zero configuration web application bundler
MOONGIFTの関連記事
コメント
