いつもお世話になっております。
今回は表題の通り、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エディタでよくね？

そっすね。

まれにインスタにアップしたりしています

みてね！

参考

つんどくコレクションもふえました