Exporting p5.js function with Browserify

问题

Here I have a p5 object that I am exporting to be bundled by 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)
  }
})

All of this works fine and I can access all built in p5 functions in other bundled scripts but not the clearCanvas function that I have defined. I also tried attaching it to the window object based on another SO post, like this:

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

Everything so far has yielded Uncaught TypeError: Cannot set property 'clearCanvas' of undefined

Any idea what I'm doing wrong?

回答1:

The modules build by browserify have their own scope, so nothing is exposed to the window object per default. You explicitly need to append your stuff to the window object to access it from a browser.

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

回答2:

First, for the section:

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

To attach something to the window object do it directly,changing it to this:

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

Worked, however I wanted to attach to the window object as infrequently as possible. For p5.js this section in the documentation is important:

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

Running p5.js in instance mode allowed me to use the clearCanvas function without binding it to the window object.

来源：https://stackoverflow.com/questions/37539141/exporting-p5-js-function-with-browserify

标签

javascript

node.js

browserify

p5.js