有没有办法在星空网站上显示p5画布？

Question

我正试图让一个p5画布在一个星体生成的网站上工作。我正试图通过导入组件来实现这一点。这是我的天文页面

import SketchWrapper from '../components/sketchWrapper.jsx';
import sketch from '../p5scripts/sketch.js'
...
<SketchWrapper sketch={sketch} />

sketchWrapper.jsx

import React, { useRef, useEffect } from '@astrojs/react'
import PropTypes from 'prop-types'
import p5 from 'p5'

// const SketchWrapper = 

SketchWrapper.propTypes = {
  sketch: PropTypes.func.isRequired
}

export default function SketchWrapper(props) {
  const sketchRef = useRef()
  useEffect(() => {
    new p5(props.sketch, sketchRef.current)
  }, [])
  return <div ref={sketchRef} />
}

script.js

export default function sketch(p) {

  // ~~~~~~ Initialize variables ~~~~~~~~~

  // ~~~~~~ React lifecycle methods ~~~~~~
  p.preload = () => {

  }

  // ~~~~~~ Setup ~~~~~~
  p.setup = () => {
    createCanvas(200, 200, webGL);
  }

  // ~~~~~~ Draw ~~~~~~
  p.draw = () => {
    background(0);
    fill(255);
    noStroke();
    text('Hello, world!', 10, 50);
  }
}

和package.json

  "devDependencies": {
    "@astrojs/react": "^0.1.0",
    "astro": "^1.0.0-beta.12"
  },
  "dependencies": {
    "p5": "^1.4.1",
    "prop-types": "^15.8.1",
    "react": "^18.0.0"
  }

(我还尝试将所有依赖项移动到devDependencies，这也不起作用)

我总是会犯这个错误

Failed to resolve entry for package ".../". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package ".../". The package may have incorrect main/module/exports specified in its package.json.
    at packageEntryFailure (.../node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:38429:11)
    at resolvePackageEntry (.../node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:38425:9)
    at tryResolveFile (.../node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:38141:38)
    at tryFsResolve (.../node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:38123:16)
    at Context.resolveId (.../node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:37959:28)
    at Object.resolveId (.../node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:36609:55)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async ModuleGraph.resolveUrl (.../node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:56244:26)
    at async ModuleGraph.getModuleByUrl (.../node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:56124:23)
    at async doTransform (.../node_modules/v

我是非常新的天文和反应，所以任何帮助将不胜感激！

Answer 1

解决方案是将p5.min.js存储在公用文件夹中，然后从页面或布局组件加载文件。<script is:inline src="/js/p5.min.js"></script>

没有必要在您的示例中使用react。

https://p5js.org/download/

如果您仍然想要解决错误，您可能想要阅读关于Vite，也就是谁做所有的捆绑。