MD-Blog_Web System

設定不要、簡単導入！
最新のビルドツール「Parcel」で開発環境をサクッと立ち上げる。

2019.04.08 Mon.

Posted by mio.satoh

今回はイマドキのビルドツールParcelを紹介します。

MDでは現在、標準開発環境としてGulpを採用しています。
あるいは、人/プロジェクトによってはwebpackでビルドする場合もあります。
これら定番のビルドツールについては、設定ファイルの書き方や便利なプラグインなどだいぶノウハウも蓄積されてきたのですが、なにせ流行り廃りが激しいのがフロントエンド業界。
令和2年にはもう新しいツールが主流になっていてもおかしくありません。

Parcel

色々と新しいツールが登場する中で、Parcelはちょっと独特の雰囲気を纏っています。
曰く、

驚くほど速く、設定不要なWebアプリケーションバンドラー

Gulpに慣れた人間にはにわかに信じ難い「設定不要」というキャッチに惹かれて、試してみました。

Parcelについて

https://parceljs.org/

設定不要のシンプルさと高速パッケージングが売りのビルドツールです。
開発サーバ機能も最初から内蔵されているので、開発環境・バンドラー両方の機能を有しています。
Adobeのエンジニアが主導しているらしく、将来性もありそうです。未来のことは誰もわからないけれど。

公式ドキュメントはこちら。
ドキュメントの内容もシンプルですね。

Parcelの導入方法

1. parcelをインストール

# グローバルにインストールする場合
$ npm install -g parcel-bundler
# プロジェクトディレクトリにインストールする場合
$ npm install --save-dev parcel-bundler

2. プロジェクトディレクトリを作成

好きな場所にディレクトリを作成してください。

下準備はこれだけです！

最小単位のプロジェクトを作ってみよう

今回は、sass(scss)のコンパイルを含む小さなHTML/CSSの開発環境を作ってみます。

一ページ完結のウェブページを制作するプロジェクトと仮定します。
まず、上で作成したディレクトリに、エントリポイントとなるindex.htmlを作成します。

index.html

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>プロジェクト名</title>
    </head>
    <body>
        <section>
            <h1>"プロジェクト名"にようこそ</h1>
        </section>

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

このエントリポイントのhtmlと、そこで読み込んでいるapp.jsが、Parcelの起動に必要最低限のファイルです。(ファイル名やディレクトリ名は何でもOK！)

ではapp.jsの内容はというと、今回はsassのコンパイルを行いたいので、このように書きます。

app.js

import "./sass/style.scss";

これだけです。

あとは空でもいいのでsassファイルを用意して、開発サーバを立ち上げてみましょう。

$ parcel index.html
Server running at http://localhost:1234
✨  Built in 208ms.

あっという間に開発環境ができちゃいました。
そして早い。

出力されたindex.htmlはこのようになりました。

<!doctype html><html lang="ja"><head><meta charset="UTF-8"><title>プロジェクト名</title><link rel="stylesheet" href="/app.a6a4d504.css"></head><body><section><h1>"プロジェクト名"にようこそ</h1></section><script src="/app.a6a4d504.js"></script></body></html>

もし複数のhtmlをコンパイルしたければ、

$ parcel *.html

という指定もできるみたいです。

こんなこともできるParcel

本番用ビルド

Webpackと同じように、sourcemapつきでビルドできます。

$ parcel build index.html
# outputディレクトリを指定する
$ parcel build index.html --out-dir build/output
# sourcemap要らないよという時は
$ parcel build index.html --no-source-maps

コマンドオプションでそれなりに設定変更できますね。
そう、Parcelは「設定不要」なだけで、「設定不可」わけではないんですね。

htmlの代わりにPugを使う

Pug(Jade)でコーディングしたいこともあるでしょう。
公式ドキュメントを見ても

Supported extensions: jade, pug

としか書かれていないのですが、実はいきなり

parcel index.pug

で行けます。
pugのプラグインが無ければ勝手にインストールされます。
package.jsonをいちいち編集する必要もないのね...！　これにはちょっと感動しました。

jsの代わりにTypeScript/CoffeeScriptを使う

もうお分かりでしょうが、これも.jsを.tsや.coffeeに変えるだけです。

まとめ：噂に違わぬ手軽さ、小規模案件で使ってみたい

簡単だ、手軽だ、とは聞いたものの、そうは言っても最初の導入は多少調べることも出てくるだろうと高をくくっておりました。
いざ導入してみると、本当に簡単。
小規模案件ならすぐ導入できちゃうんじゃないかな、という印象です。

Gulpの設定ファイルを秘伝のタレのように付け足しつつ引き継いでいくのも嫌いではないですが、スーパーの惣菜のようにすぐ食べられるParcelも悪くないですね。

Recent Entries

MD EVENT REPORT

What's Hot?

株式会社MONSTER DIVE