#最初に
土曜の朝に「webpack時代の終わりとparcel時代のはじまり」なんて魅力的なタイトルが付いた記事があったので早速乗っかってみた。
#環境構築から
とかいうわりにnode.js環境がなかったり、自分の端末がwindowsだったりなので、nodistインストールから。
↓が参考になりました。
Windows での最速 Node.js 環境構築
まぁまぁそのとおりなのだが、ちょっとだけ補足。
- 通常のコマンドプロンプトでもできるかのような記載だが、起動しても結局管理者権限のpowershellでやれ！といわれる。
- npmアップグレードはうまくいかなかった
確かに簡単に環境構築できた。
#parcel導入まで
https://parceljs.org/のGetting Startedに素直に従った。
npm install -g parcel-bundler
で、rootパスに移動して
cd c:\wwwroot
parcel index.html
これだけ。parcelするとコンパイルが始まりますがあっという間。
あとは
http://localhost:1234
すれば、動きます。
あっという間にHMRの完成ですね。
（HMRってのはHot Module Replacementの略なのだそうですが…初めて知りました。）
riot.jsを使ってますが、普通に動きました。
#気をつけること
当たり前なのかもしれませんが、適当なグローバル変数や関数を定義しているとダメ。
<script src='hoge.js'></script>
<script src='aaa.js'></script>
var AAA = 'hoge';
console.log(AAA);
こんな感じでまたいでいてもindex.htmlで両方のjsを順番間違えず取り込んでいれば通常は動きますが、parcelではこれがダメ。
<script>
var MYAPP = {};
</script>
<script src='hoge.js'></script>
<script src='aaa.js'></script>
MYAPP.AAA = 'hoge';
console.log(MYAPP.AAA);
こんな感じにすれば動きます。
#phina.jsとの相性
いまphina.jsを使ってゲームを作ってる都合で、phina.jsと使いたかったのですが、こちらは
クラスphina.asset.SpriteSheet
var json = JSON.parse(data);
のあたりではまってしまう。dataにhtmlタグが含まれる可能性があり、parcelだとそこではじかれる。
phina.js本体をいじってみたけど簡単じゃなさそうだから、とりあえず今回はphina.jsを使うときにはあきらめることにした。
#最後に
webpackなるものも併せて検索しましたが、少なくともHMR（←知った言葉を使いたがる）だけならこっちのほうが確実に簡単。
個人メモに近いですが、こんなところで。