遅ればせながら Parcel を使ってみた
Webpack のような設定ファイルを一切置かず、ES2015・SCSS などをトランスパイルできる Parcel というツールを使ってみた。
Node.js v10.7.0・npm v6.1.0 をインストールした MacOS HighSierra 環境でお試しした。
まずは素振り環境をサクサクっと作っていく。
# 作業用ディレクトリを作りそこに移動する
$ mkdir parcel-practice && cd $_
# Git 管理しておく (任意)
$ git init
$ git commit --allow-empty -m "Init"
# package.json を生成する
$ npm init -y
# Parcel をローカルインストールする・本稿執筆時点では v1.9.7 がインストールされた
$ npm i -D parcel-bundler
# 作業用ファイルを作成する
$ touch index.html
$ touch index.js
$ touch index.scss
とりあえずこんな感じ。次に index.html から index.js を読み込むように書いておく。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Parcel Practice</title>
<script src="index.js"></script>
</head>
<body>
<p>Lorem ipsum</p>
</body>
</html>
そしたら index.js を開いて、ココから index.scss をインポートするように書いておく。インポート以降は ES2015 コードを書いたりしても良い。
// index.scss を読み込む
import './index.scss';
// 何か処理とか…
document.addEventListener('DOMContentLoaded', () => {
console.log('DOMContentLoaded!')
});
最後に index.scss が読み込まれているか分かるよう、適当にスタイルを書いておく。
// index.scss
body {
background: #ddd;
p {
color: #f0f;
}
}
コレでファイルの準備は完了。いよいよ Parcel を実行する。
$ npx parcel index.html --open
npx を使うと、ローカルインストールしてあるパッケージのコマンドが使える。package.json の scripts に "parcel": "parcel" と定義して、npm run parcel と叩く必要はもうない。
デフォルトでは http://localhost:1234/ で簡易サーバが立ち上がり、指定されたエントリポイントである index.html を解析して index.js と index.scss を探し出し、それぞれのファイルの形式に合わせて ES2015 や SCSS をトランスパイルしてくれる。トランスパイルした成果物は dist/ ディレクトリ配下に置かれる他、.cache/ ディレクトリもひっそりできているので、.gitignore で無視するのをお忘れなきよう。
初回だけは必要なトランスパイルライブラリをダウンロードしたりしているのか、少々時間がかかる。SASS / SCSS があると、package.json に勝手に node-sass が増えた。参考文献によれば、typescript パッケージを入れておけば TypeScript もトランスパイルしてくれるようだ。
当然のように Watch 機能も付いているので、エントリポイントから参照できるファイル (ココでは index.html・index.js・index.scss の3つ) を修正して保存すると、即座にブラウザに反映してくれる。
「なんたら Config」みたいなファイルは一切なく、勝手にココまでやってくれて素晴らしい。本番向けビルドまで完結させるような使い方は難しいかもしれないが、素振り環境として、個人で作るレベルなら全く問題なさそう。