Javascript 避免在p5中使用全局作用域

我刚刚在p5中启动了一个新项目，我已经在浏览器中直接导入了它，但这一次，因为它是一个更复杂的项目，我将在webpack中使用它

我导入了库并以以下方式引导它：

import * as p5 from 'p5';

function setup() {
  createCanvas(640, 480);
}

function draw() {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

但它不起作用

原因很简单：webpack将模块包装在本地范围内，而p5并不知道

因此，我将函数分配给全局范围：

import * as p5 from 'p5';

window.setup = function () {
  createCanvas(640, 480);
}

window.draw = function () {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

它工作得很好，但看起来还是错的。我不认为调查全球范围是2019年与JS合作的正确方式。特别是如果我正在使用webpack并准备实现TypeScript

那么，我如何告诉p5在模块范围内而不是全局范围内查找函数呢。以下是该页面中的示例：

var sketch = function( p ) {

  var x = 100; 
  var y = 100;

  p.setup = function() {
    p.createCanvas(700, 410);
  };

  p.draw = function() {
    p.background(0);
    p.fill(255);
    p.rect(x,y,50,50);
  };
};

var myp5 = new p5(sketch);

实例：

var sketch=函数（p）{
var x=100；
变量y=100；
p、 设置=函数（）{
p、 createCanvas（700410）；
};
p、 draw=函数（）{
p、 背景（0）；
p、 填充（255）；
p、 rect（x，y，50,50）；
};
};
var myp5=新的p5（草图）
“它工作正常，但看起来仍然是错误的。”这是一种很好的直觉。：-）这是可行的，但就像在另一种模块中使用一个模块一样。如何使用网页包模块？我如何使用ES5的功能，比如类？@CristianTraìna-据我所知，这就是使用p5的方式。请记住，p5的目标是设计师和艺术家，而不是程序员，并且有意在技术选择时考虑到这一点。重复上课：你没有问那个（这很好：你应该每个问题问一个问题）。你问过如何避免使用globals。但我不认为您可以轻松地使用带有p5的类。你可以使用一个对象初始化器，上面有方法和方法，然后将这些拷贝到实例P5中给出回调函数，但是，对于一个面向程序员的经验，你可以考虑，或者，“P5是针对设计者和艺术家，而不是程序员”，如果我尝试的话，就不会再反对这个声明了。T.J.Crowder和推荐processing.js而不是p5.js来实现更“面向程序员的方法”毫无意义。processing.js所做的就是将处理代码解释成JavaScript。@T.J.Crowder你说服了我。即使是。。。奇怪的我的意思是，这解决了全局范围的问题，但是如果我想让两个模块交互呢？如果我想避免在每个方法或属性的开头重复
p.
，但仍然保留名称空间，该怎么办？这是对图书馆的批评，不是对你的回答，我希望它是清楚的。但我的问题是关于范围的，你是对的