我想写一个基于的库p5js https://github.com/processing/p5.js,所以在我的 Javascript 项目中我有Webpack作为开发依赖项安装,我将其写在start.js
:
import p5 from "p5";
p5.ellipse(0, 0, 100, 100); // Function not found :(
然而,没有找到参考文献p5
。我期待找到对 p5 函数的引用,例如rect
or ellipse
or 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']
}
}
}
],
}
};
我究竟做错了什么?
就像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 https://stackblitz.com/edit/p5-in-webpack
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)