如何将 p5js 与 Webpack 一起使用

Question

我想编写一个基于p5js 的库，因此在我的 Javascript 项目中，我将Webpack安装为开发依赖项，并将其写入start.js：

import p5 from "p5";

p5.ellipse(0, 0, 100, 100); // Function not found :(

然而，在 中没有找到参考文献p5。我本来希望找到对 p5 函数的引用，例如rectorellipse或setup，但什么也没有。

更多信息

我的 Webpack 配置文件是：

const path = require('path');

module.exports = {
    entry: './start.js',
    output: {
        filename: 'start.js',
        path: path.resolve(__dirname, 'out')
    },
    module: {
        rules: [
            /* In order to transpile ES6 */
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            }
        ],  
    }
};

我究竟做错了什么？

Answer 1

就像iluvAS所说，你需要使用实例模式。

// use this import in your webpack. Commented out because the CDN script exposes p5 as global
// import p5 from 'p5'; 

const containerElement = document.getElementById('p5-container');

const sketch = (p) => {
  let x = 100;
  let y = 100;

  p.setup = function() {
    p.createCanvas(800, 400);
  };

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

new p5(sketch, containerElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
<div id="p5-container"></div>

这是 stackblitz 上托管的 webpack 和 es6 模块导入的另一个工作示例（在底层使用 webpack）：https://stackblitz.com/edit/p5-in-webpack