ちょっとしたappのビルドはParcelでいいかもしれない

React JavaScript

Parcelというapplication bundlerが話題なので早速試してみた。
リリースから5日で7000以上のGitHub starを集めている。

Parcelとは

📦 Parcel

fast, zero configurationを謳うapplication bundler。
要するにconfigの要らない、ビルドの速いwebpackのようなもの。

ちょっとしたものを書くにも(boilerplateを流用できるとはいえ)configの管理は手間で、自分のようにちょっとしたアイデアを試すのにappを作るような場合には非常に助かる。

parcel-bundlerのインストール

$ yarn init -y
$ yarn add parcel-bundler --dev

エントリーポイントの作成

parcel-bundler/parcel: 📦🚀 Blazing fast, zero configuration web application bundler

Parcel can take any type of file as an entry point, but an HTML or JavaScript file is a good place to start. If you link your main JavaScript file in the HTML using a relative path, Parcel will also process it for you, and replace the reference with a URL to the output file.

htmlをエントリーポイントにすることで、パスの解決をいい感じに行ってくれる。

index.html

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

application.js

import { message } from './message'
document.body.innerText = `message: ${message}`

message.js

export const message = 'Hello, Parcel!'

$ yarn parcel index.html
yarn run v1.3.2
$ “/path_to_project/node_modules/.bin/parcel" index.html
Server running at http://localhost:1234
✨  Built in 160ms.

これだけである。
dev-serverもビルトインされているので http://localhost:1234 にアクセスして確認する。
ファイルの保存をすればauto reloadもちゃんと動作する。

※ ビルド済みのコードが dist/ 、キャッシュが .cache/ 以下に作成されるので .gitignore に追加しておきたい

React

「ちょっとしたapp」を作る場合、最近だとReactを使うことが多いので対応状況が気になる。

$ yarn add react react-dom
$ yarn add babel-preset-react babel-preset-env --dev

.babelrc

{
  "presets": ["env", "react"]
}

box.jsx

import React from 'react'

export default function Box(props) {
  return <h1>{props.message}</h1>
}

application.js

import React from 'react'
import { render } from 'react-dom'
import Box from './box'

render(
  <Box message="Hello React component!!" />,
  document.querySelector('#app')
)

index.html

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

$ yarn parcel index.html
yarn run v1.3.2
$ “/path_to_project/node_modules/.bin/parcel" index.html
Server running at http://localhost:1234
✨  Built in 1.48s.

たったこれだけ。
拡張子 .jsx も解決できている。
React込みのビルドをしているとは思えないほど速い。

所感

Zero configurationであるが故に、仕事で使っていると痒いところに手がとどかないということは当然出てくると思う。
しかし、休日にちょっとしたスケッチ気分でappを書きたいときには十分使えるなという印象。

もともとwebpackのビルド速度もそれほど遅いと感じたことはないし、趣味で作っているものなんてサイズはたかが知れているのだが、それでもビルドが速いというのは気持ちがいいものだ。