Parcelでp5.jsでProcessingする
いつもお世話になっております。
今回は表題の通り、PでPでPしたいと思います。
Parcelとは
設定がいらない、モジュールバンドラということだそうです。
なぜParcelを使うか
・お手軽にオートリロード&ビルド環境作りたい
・モジュール化していきたい
という感じです。Webpack慣れてるかたはWebpackでいいような気がします。
Parcelのセットアップ
初回、グローバルインストール
npm install -g parcel-bundler
プロジェクトディレクトリに移動して
npm init -y
これでparcelは完。
p5.jsをプロジェクトでつかえるようにする
次にp5.jsを
npm i --save p5
してjsで
var p5 = require('p5');
しましょう。
注意事項
・instance modeでつかう
グローバル関数として展開するとバンドラーの仕様上うまく動作しないようです。
・オートリロード問題
WebpackはParcelは再描画なしの変更の反映を行うHot Module Replacementという仕組みが使われているようですが、なぜだかうまくうごかず、、
ファイルの保存でブラウザのリロードが行われるように対応する必要がありました。このへんちょっと私がよくわかってないだけな可能性もあるので、引き続き調査&改善したいところ。
if (module.hot) {
module.hot.dispose(() => {
window.location.reload();
})
}
Webエディタでよくね?
そっすね。
まれにインスタにアップしたりしています
みてね!
参考
つんどくコレクションもふえました
いただいたサポートは全て、アサヒスーパードライになります