Экспортирующего p5.js работать с Browserify

Question

Здесь у меня есть объект p5, что я экспортирующий быть в комплекте по browserify:

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. Я также попытался его подключением к объекту окна на основе другого SO размещать, например:

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

Все до сих пор давал неперехваченный TypeError: Невозможно установить свойство «clearCanvas» неопределенной

Любой идею, что я Неправильно?

Answer 1

Во-первых, для раздела:

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

Чтобы прикрепить что-нибудь к объекту окна сделать это непосредственно, изменяя его к этому:

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

Работала, однако я хотел приложить к объекту окна как можно реже. Для p5.js этот раздел в документации важно:

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

Модули, построенные с помощью браузера, имеют свой собственный масштаб, поэтому ничто не подвергается объекту 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); 
});