我在让这个包工作时遇到了困难.我已经创建了一个基本的P5 JS项目，但我无法让导入在我的JS文件中工作.
这是我的JS文件，它在浏览器中运行良好，直到我在顶部添加导入行.
import { createNoise2D } from "simplex-noise";
function setup() {
createCanvas(400, 400);
noLoop();
}
function draw() {
background(220);
}
我通过将"type" : "module",行添加到我的Package.json中并将type="module"添加到我的JS文件的html脚本标签中来修复了最初的错误.这就是我留下的错误
100
有什么 idea 吗？我完全迷路了
以下是初学者的快速浏览器草图.
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/p5.js"></script>
<script type="module">
import {createNoise2D} from "https://unpkg.com/simplex-noise@4.0.1/dist/esm/simplex-noise.js";
const noise2d = createNoise2D();
new p5(p => {
p.frameRate(2);
p.draw = () => {
p.print(noise2d(p.frameCount, p.frameCount));
};
});
</script> node 方法在一定程度上取决于您拥有的构建设置.如果导入失败，请确保安装包含npm i simplex-noise的包.
以下是您可以使用的简单、完整的包裹设置:
src/index.js:
import p5 from "p5";
import {createNoise2D} from "simplex-noise";
const noise2d = createNoise2D();
new p5(p => {
p.frameRate(2);
p.draw = () => {
p.print(noise2d(p.frameCount, p.frameCount));
};
});
SRC/index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>My First Parcel App</title>
<script src="./index.js" type="module"></script>
</head>
<body>
</body>
</html>
package.json:
{
"dependencies": {
"p5": "^1.9.3",
"simplex-noise": "^4.0.1"
},
"devDependencies": {
"parcel": "^2.12.0"
}
}
运行:
$ npm i
$ npx parcel src/index.html
Server running at http://localhost:1234
✨ Built in 4ms
您应该在http://localhost:1234上看到该应用程序.打开控制台以查看噪音.