0
まず付きp5.jsから関数をエクスポート、私はp5.jsスクリプトを持っている：P5ので、それはbrowserifyでバンドルなるように、私は実行を理解するようBrowserify
//canvas.js
var p5 = require('p5')
module.exports = new p5(function() {
this.setup = function setup() {
this.createCanvas(700, 400)
this.background(205)
this.loadImage('/uploads/uploaded_image', function (img) {
image(img, 0, 0)
})
this.updatePixels()
}
this.clearCanvas = function redraw() {
this.background('black')
}
すべてが、新しいP5オブジェクトでありますグローバルな名前空間で。これは問題なく機能しましたが、キャンバス全体を黒くするボタンが必要でしたので、キャンバスをすべて黒で再描画する新しい関数clearCanvasを追加しました。私はp5オブジェクトに必要とし、この新しい関数を別のスクリプトで使用できるように、module.exportsの部分を追加しました。それから私は私のヒスイのファイルにボタンを追加しました：
button(type='button', id='clear').
Click to clear
をそして私はP5エクスポートされたオブジェクトに必要とclearCanvasを使用するハンドラを作成したのonClick機能：
var canvas = require('./canvas.js')
document.getElementById('clear').onclick = function() {
canvas.clearCanvas()
}
結果は、2つのエラーですbundle.js
：34633キャッチされない例外TypeErrorは：
bundle.jsがnullの 'onclickの' プロパティを設定できません：コンソールで14197のP5は問題グローバルfunctiを作成していましたあなたのコードがすでにその名前を変数として使用している可能性があります。変数の名前を変更することができます。