フロントエンドに手を出し始めてからずっとwebpackを使ってましたが、webpack.config.jsを書くのが面倒だったり、主観ですがビルドが遅かったりしたので、もう少し速くて手軽なビルドツールを探したところParcelというものが見つかったので使ってみました。

Parcelとは

parceljs.org

めっちゃ速くて、設定ゼロのウェブアプリケーションにおけるバンドラーだそうです。速くて設定ゼロは個人的に激アツです。設定はせずに済むならしたくない。

インストール

試しにVue.js+TypeScriptで開発する環境を作ってみます。

環境

node
- v10.10.0

手順

個人的にyarnが好きなので入れます、npmでも問題はありません。

npm install -g yarn

適当なディレクトリを作ります。そしてparcelをインストールします。

# mkdir sample
# cd sample
# yarn add -D parcel-bundler

これでインストールは完了です。

使ってみる

TypeScriptのビルド

index.tsを作ってビルドをしてみます。

export const fuga = (): string => {
    return "fuga";
}

console.log(fuga())

以下のコマンドを叩いてビルドから実行をしてみます。

# npx parcel build index.ts
✨  Built in 64ms.

# node dist/index.js
fuga

ちなみにnpxはローカルにインストールしたパッケージのコマンドを叩いてくれる便利コマンドです。qiitaで紹介されていました。

https://qiita.com/tonkotsuboy_com/items/8227f5993769c3df533d

これでdist/index.jsにビルド後のファイルが生成されます。

ここでpackage.jsonを見てみると

{
  "devDependencies": {
    "parcel-bundler": "^1.9.7",
    "typescript": "^3.0.3"
  }
}

となっており、typescriptのビルドに必要なもののインストールも勝手にやってくれているのがわかります。なにこれクソ便利やん。

エラーもわかりやすく表示してくれます。

f:id:te-nu:20180919230750p:plain

VueのSFCのビルド

Vue.jsのSFCを使い、テキストエリアに入力した文字列をそのまま表示するページを作ってビルドしてみます。

SFCをビルドするためにはプラグインが必要だったようですが、Parcelの1.7.0以降で公式にサポートがされたらしく、いらなくなっているようです。

parcel-plugin-vue - npm

まずvueをインストールしておきます。

yarn add -D vue

ざっくりとサンプルを作ります。ファイル構成は以下の通りです。

.
├── component.vue
├── dist
├── index.html
├── index.ts
├── node_modules
├── package.json
└── yarn.lock

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="index.ts"></script>
</body>

index.ts

import Vue from "vue"
import App from "./component.vue"

new Vue({
    el: '#root',
    render: h => h(App)
});

component.vue

<template>
    <section>
        <input type="text" v-model="text">
        <div>
            入力された文字：
            <span v-text="text"></span>
        </div>
    </section>
</template>

<script lang="ts">
    export default {
        data () {
            return { text: "" };
        }
    };
</script>

<style scoped>
    span {
        background-color: red;
    }
</style>

あとはビルドを行います。

npx parcel build index.html --public-url ./

htmlに対して叩くと、<script>で指定しているファイルを読み取りビルドした上で、ビルド後のファイルを読み込むhtmlファイルを作ってくれます。

--public-urlは出力されるjs, cssファイルのディレクトリを指定してあります。今回はhtml, js, css全て同じdistディレクトリに入っているため./を指定してあります。

dist/index.htmlに完成品が出力されます。

f:id:te-nu:20180919230809p:plain

まとめ

ほとんど何も気にすることなくビルドができました。productionにも使えるとの話があるので、導入を検討しようかなーと思っています。

tsconfig.jsonは置いておくと勝手に読み込んでくれるようです。これまた便利。

主なコマンドは以下の通りです。

watch
- 監視モードでのビルド起動
- 変更を検知して勝手にビルド
- 開発中はこれを動かせばOK
build
- ビルドする
- 手打ちでしたい時はこれ
serve
- 開発用サーバの起動
  - ポートは1234

watchやserveをdocker内で行うと、portの設定などで詰まったのでまた紹介したいと思います。

今回はこのへんで、では。

ウェブエンジニア珍道中

日々の技術的に関する経験を書いていきます。脱線もしますが助けになれば幸いです。

ParcelでVue.js + TypeScriptの環境構築をしてみた