Parcel + Riot.js
nasa9084
Posted on December 14, 2017
tl;dr
- ParcelというJavaScriptのモジュールバンドラを触ってみた
- webpackなどと比べて設定ファイルなどもいらずとても簡単
- ホットリロードな開発サーバを簡単に実行できる
- Riotと組み合わせるのもそれほど難しくない
Parcel + Riot.js
ParcelというJavaScriptのモジュールバンドラが話題なのでさわってみました。
国内で話題になっている元の記事は「webpack時代の終わりとparcel時代のはじまり」。
Reactとの組み合わせで記事を書かれています。
個人的にはRiot.jsが好みなので、Riot.jsとの組み合わせで触ってみました。
尚、webpackは挫折したため比較できません。
Parcel/Riot.jsのインストール
npmを使ってインストールします。
$ npm install -g parcel-bundler riot
source code
ディレクトリ構造
以下の様なディレクトリ構造だとします。
なお、練習用のため、動作確認に関係ない部分は適当に削っています。
src/
|- index.html
|- index.js
|- package.json
|- app/
| |- App.tag
index.html
<!doctype html>
<html lang="ja">
<head></head>
<body>
<App></App>
<script src="index.js"></script>
</body>
</html>
index.js
import riot from 'riot'
import './app/tags'
riot.mount('App')
App.tag
<App>
<h1>Hello, parcel world!</h1>
<script>
import riot from 'riot'
</script>
</App>
package.json
package.jsonはnpm init -yで作成しました。
compile/bundle & run
$ riot app/ app/tags.js
$ parcel index.html
上記のコマンドで http://localhost:1234 でホットリロードのサーバが動作します。
最終的な成果物を作る場合は parcel build index.htmlとすれば良いようです。
しかし、riot.jsのコンパイルはparcelの前段で別途行っているため、tagファイルの変更はwatchされません。riotコマンドに-wオプションをつけることでウォッチできますが、そのままだと二つのコマンドを別々の端末で開くなどする必要があり、若干面倒です。
package.jsonのscriptsに以下の三つのコマンドを追加します。
{
"watch": "npm run watch:riot & npm run watch:parcel",
"watch:riot": "riot -w app/ app/tags.js",
"watch:parcel": "parcel index.html"
}
追加したら、以下のコマンドを実行します。
$ npm run watch
これでコマンド一つでホットリロードの開発サーバを動作させることができます。
💖 💪 🙅 🚩
nasa9084
Posted on December 14, 2017
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.