Help us understand the problem. What is going on with this article?

parcel魅力的です

More than 1 year has passed since last update.

最初に

土曜の朝に「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を使ってますが、普通に動きました。

気をつけること

当たり前なのかもしれませんが、適当なグローバル変数や関数を定義しているとダメ。

index.html
<script src='hoge.js'></script>
<script src='aaa.js'></script>
hoge.js
var AAA = 'hoge';
aaa.js
console.log(AAA);

こんな感じでまたいでいてもindex.htmlで両方のjsを順番間違えず取り込んでいれば通常は動きますが、parcelではこれがダメ。

index.html
<script>
var MYAPP = {};
</script>
<script src='hoge.js'></script>
<script src='aaa.js'></script>
hoge.js
MYAPP.AAA = 'hoge';
aaa.js
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(←知った言葉を使いたがる)だけならこっちのほうが確実に簡単。

個人メモに近いですが、こんなところで。

damacchi
今は「プロジェクトに居たらありがたい人」を目指しています。感謝されること、感謝すること。これが私の幸せ。これができてれば多分今後も生活できる。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした