使用 Browserify 导出 p5.js 函数

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 post 的 window 对象，如下所示：

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

到目前为止一切都产生了未捕获的类型错误：无法设置未定义的属性 'clearCanvas'

知道我做错了什么吗？

Answer 1

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

Answer 2

首先，对于该部分：

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

要将某些内容附加到 window 对象，请直接执行此操作，将其更改为：

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

有效，但我想尽可能少地附加到 window 对象。对于 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 函数而不将它绑定到 window 对象。

使用 Browserify 导出 p5.js 函数

Exporting p5.js function with Browserify

javascript

node.js

browserify

p5.js