是否有办法在一个天文网站上显示p5画布?

Question

我试图得到一个p5画布上的天文生成的网站工作。我想通过导入一个jsxreact组件来实现。这是我的天文页面

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，它是做所有捆绑的人。