Recruit

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

Blog

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）

Return back

Recommend

Contact Us