はBrowserify

Question

でp5.js機能のエクスポートここで私は私がbrowserifyで束ねなければ輸出していP5オブジェクトを持っている：

var p5 = require('p5') 
var colorPicker = require('./color_picker.js') 

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') 
    } 

    this.mouseDragged = function mouseDragged() { 
    var rgb = colorPicker.getRGB() 
    this.stroke(rgb.r, rgb.g, rgb.b) 
    this.strokeWeight(10) 
    this.line(this.pmouseX, this.pmouseY, this.mouseX, this.mouseY) 
    } 
}) 

このすべてが正常に動作し、私は他のバンドルでP5機能内蔵のすべてにアクセスすることができます私が定義したclearCanvas関数ではありません。

window.this.clearCanvas = function redraw(){ 
//code 
} 

これまでに捕捉されない例外TypeErrorをもたらしたすべてのもの：未定義

のプロパティ「clearCanvasに」私は「何任意のアイデアを設定することはできません私はまた、SO、このように、投稿別に基づいてウィンドウオブジェクトに取り付ける試してみました間違ってる？

Answer 1

まず、：

window.this.clearCanvas = function redraw(){ 
//code 
} 

ウィンドウオブジェクトに何かを添付するには、このにそれを変更すること、それを直接実行します。しかし私は、添付したかった

勤務

window.clearCanvas = function redraw(){ 
//code 
} 

、可能な限り頻繁にウィンドウオブジェクトに移動します。 p5.j​​sのドキュメントにこのセクションでは、重要である：インスタンスモードで

By default, all p5.js functions are in the global namespace (i.e. bound to the window object), meaning you can call them simply ellipse(), fill(), etc. However, this might be inconvenient if you are mixing with other JS libraries or writing long programs of your own. To solve this problem, there is something we call "instance mode", where all p5 functions are bound up in a single variable instead of polluting your global namespace. 

https://github.com/processing/p5.js/wiki/p5.js-overview

実行p5.jsは私がウィンドウオブジェクトにそれを結合することなくclearCanvas機能を使用することができました。

Answer 2

browserifyでビルドされたモジュールは独自のスコープを持っているため、デフォルトではwindowオブジェクトには何も公開されていません。ブラウザからアクセスするには、オブジェクトをwindowオブジェクトに追加する必要があります。セクションの

var p5 = require('p5') 
var colorPicker = require('./color_picker.js') 

module.exports = new p5(function() { 
    // ... 
    this.clearCanvas = function redraw() { 
    this.background('black') 
    } 
    // ... 
    window.clearCanvas = this.clearCanvas.bind(this); 
});