ブログ

parcel.jsをためしてみました

parcel.jsとは

【公式サイト】parcel.js
nodeで動くモジュールバンドラです。

特徴

  • Blazing fast bundle times(高速・軽量)
  • Friendly error logging(ログわかりやすい)
  • Automatic transforms(自動置換 ※デフォルト設定でよければbabelとか特に設定不要)

webpackは出力されるコードが膨大&設定が大変だったりで、単純なwebページの構築に導入するのはなかなか腰が重いですが、この点をカバーしてくれるのであれば嬉しいなーということで、npm経由でのjsライブラリ使用を想定しサンプル作成してみました。

手順

①nodeのバージョンは、おそらく8以上が推奨と思われます。5だと動きませんでした。
②ターミナルから、グローバルにパーセルをインストールします。
npm install -g parcel-bundler
公式サイトTOPにあるサンプルを参考に、Hello World表示用の4ファイルを作成します。
※公式にあるものをそのままコピーすると、index.htmlに.main(クラス)のDOMがいなかったりコンソールエラーが出ます。

# index.html

<html>
<meta charset="UTF-8">
<body class="main">
    <script src="./index.js"></script>
    <p>Parcel.jsのTestだよ</p>
</body>
</html>
# index.js

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

main();
# main.js

// import a CSS module
import './main.css';
import $ from 'jquery';

export default () => {
  console.log('hello world!!');
};

let array = [1, 2, 3];
$(() => console.log(array[1]));
# main.css

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

④今回はjqueryの使用もためしたいので、npm経由でインストール
npm install jquery --save
④該当ディレクトリに移動して下記コマンドを入力します
parcel index.html

・・・なんとこれだけで、dist/ディレクトリにコンパイル後のアセットたちが出力されました!
本当に設定ファイルいらない!

確認はhttp://localhost:1234からおこなえます。parcel実行時に-p <port number>(option)を指定することで任意のアドレスに変更可能なようです。(参考

所見

  • 設定ファイル、ほぼいらない
  • リアルタイムでbuildしてくれる(ファイル保存時)
  • 高速かつ出力後のファイルもスッキリ
  • エラーの際も、コンソールにしっかりエラー箇所の指摘出てわかりやすい

npm経由でjQuery使用してみましたが、何もせずともnode_moduleの中身みにいってくれます。
さくっとLPなど作りたいときにはスピーディかと。

課題(考察)

とはいえやはりバンドラーなので、webアプリ向けなのかなという印象を持ちました。
web向けで使うとすると、出力の際にdist/以下のディレクトリも指定できれば便利なのかな〜というところなのですが、
packagerのカスタムとかが必要そうな感じかしら。
設定ファイル不要な分、かゆいところに手が届かない可能性はなきにしも非ず、な感じです。

サンプルファイル

こちらからDLできます。(parcel.js v1.4.1)