parcel bundlerを使う

2019.05.13
Webのフロントサイド開発はWebpackが多いと思いますが、Webpackなどのいままでのバンドラは設定が複雑になりがちでした。

そういう設定ファイルを無くしたいというので生まれたのがparcelのようです。

parcelの記事はよそにも結構あるのですが、うちでも一応触れておこうと思います。

parcelを使う理由

ごちゃごちゃを統合したい

フロントではHTML、CSS、JavaScriptが利用されてきましたが、これらをそのまま使うのは開発効率があまりよくありませんでした。
  • ソースの分割ができず1ファイルに全て押し込む必要があった
  • ブラウザ毎の違いがあった
  • 言語としての表現力の低さ、無駄な記述の多さ
などなど、そこでそれらを個別に解決する技術が後々生まれてきました。
  • HTMLを完結に記述できるPUG
  • CSSを構造化できるLESS
  • JavaScriptに静的型をつけるTypeScript
  • JavaScriptのバージョンやブラウザの違いを吸収するbabel
など、これ以外にも山ほど生まれています。

これらを個別に適用していくのは煩雑でそこでそれをまとめて適用するタスクランナーやバンドラが生まれ、parcelはその一つです。

設定ファイル疲れ

先ほども少しふれましたが、parcelは設定ファイル疲れから生まれました。

バンドラの代表であるWebpackは顕著ですが、これらのツールを適用するための設定ファイルの記述が重要でした。

具体的なwebpackの設定はぐぐると色々でますが、JavaScriptを使ってとても柔軟にできるもの規模が大きくなると管理が辛くなってきます。

設定という域を出て、普通にコーディング能力が求められてくることもあります。

そこでparcelでは、この設定ファイルを無くして、プロジェクト中に存在するファイルから自動で解決するようにしています。

とはいってもなくせるのはparcelの設定ファイルだけで、他のbabelやlintなどの設定ファイルは依然として必要です。

parcel使ってみる

では一度実際にやってみます。前提としてNode.jsとyarnはインストール済みとします。
  • yarnでプロジェクト作る
  • parcel入れる
  • parcelでビルドする
  • ポリフィルってみる
  • SASSってみる

yarnでプロジェクトを作る

initするだけなので特に書くこともありません。

プロジェクトのフォルダを作ったら、ターミナルを開き

$ yarn init
するだけです。

プロジェクト名どうするの？とか聞かれますが、好きに回答して大丈夫です。なんだったら後から変更も簡単に出来ます。

終わると、フォルダにpackage.jsonが生み出されます。

parcelいれる

ターミナルで以下のコマンドを入力します。 
$ yarn add -D parcel-bundler
これだけでインストール完了です。 ※-Dは開発用にライブラリをインストールする指定です。

parcelでビルドしてみる

ビルド用のHTMLとJavaScriptを適当に用意します。

まずindex.html

<!DOCTYPE html>
<meta charset="utf-8" />
<title>parcel test</title>

<script src="index.js" defer="defer"></script>

<body>
    <div>
        parcelのテストだよ
    </div>
</body>

index.js

document.addEventListener('DOMContentLoaded', () => {
    window.alert('ロードおわったよ');
});

ビルド

$ yarn parcel index.html

このコマンドで開発用のビルド＋開発用のサーバーの稼働までが自動で行われます。ビルド結果はdistフォルダが自動で生み出されていると思います。

無事完了したら「Server running at http://localhost:1234」とターミナルに表示されます。ブラウザでこのアドレスを開くと先ほどの実装通りにalertが表示されると思います。

parcelではビルド時に対象となるファイルを1つ指定します。htmlでなくてもよいですが、htmlが一番わかりやすいと思います。

ビルド時は対象のファイルが参照しているファイルを自動で読み取って各種変換処理であったりを行います。

また、特殊な設定ファイルが見つかった場合も自動で適用します。

ポリフィルってみる

ポリフィルも行ってみます。 
document.addEventListener('DOMContentLoaded', () => {
    asyncFunction();
});

function promiseFunction() {
    return new Promise(resolve => {
        resolve();
    });
}

async function asyncFunction() {
    await promiseFunction();
    alert('await完了');
}

上のコードはasync-awaitが利用されていますが、ランタイムエラーが発生します。

これにはbabelのpolyfillが必要だからです。

※将来のバージョンではもしかしたら勝手に解決されるかもしれません。

以下のようにJSに一行足します。

import '@babel/polyfill';

document.addEventListener('DOMContentLoaded', () => {
    asyncFunction();
});

function promiseFunction() {
    return new Promise(resolve => {
        resolve();
    });
}

async function asyncFunction() {
    await promiseFunction();
    alert('await完了');
}
先頭のimport ‘@babel/polyfill’;です。これだけで、import構文の自動結合であったり、@babel/polyfillパッケージの解決も終わっています。

SASSってみる

sassってみます。

style.scss

body {
    div {
        background-color: #a0a0f0;
    }
}
bodyの中のdivの背景を変える意味のない指定です。

このsassをhtml側で参照するようにします。

index.html の編集

<!DOCTYPE html>
<meta charset="utf-8" />
<title>parcel test</title>

<script src="index.js" defer="defer"></script>
<link rel="stylesheet" href="style.scss" />

<body>
    <div>
        parcelのテストだよ
    </div>
</body>
linkの部分です。他の指定は設定ファイルなども不要です。

この状態で再度サイトを確認すると背景色が変更されていると思います。

まとめ

とにかくwebpackなどに比べてparcelは何もしなくて良いので楽です。

とりあえず最初はparcelで始めてみるというのが良いと思います。

ただし、その分自由な設定は難しいです。そういう場面に遭遇したらwebpackを構築する必要に迫れるかもしれません。

とはいえ、parcelもだんだん高機能になってきていますので、そういうケースは減っていくのではと思ってはいます。
タイトルとURLをコピーしました