有没有办法在Astro站点上显示P5画布？

Question

我试图让P5画布在Astro生成的网站上工作。我正在尝试通过导入JSX React组件来做到这一点。 是我的Astro Page

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);
  }
}

and

  "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"
  }

。

package

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存储在公共文件夹上，然后只需从页面或布局组件加载文件即可。 ＆lt; script是：Inline Src =“/js/p5.min.js”＆gt;＆lt;/script＆gt;

无需在示例中使用React。

https://p5js.org/download/

如果您仍然想求解错误，则可能要读取该错误关于vite，那就是谁捆绑了所有。