时间戳

首页 > 解决方案 > 如何将 matterjs 作为 npm 模块导入到我的 p5 草图中？

javascript - 如何将 matterjs 作为 npm 模块导入到我的 p5 草图中？

问题描述

我正在开发一个 P5 草图，我首先遵循 Daniel Shiffman 的“使用 Express 和 Node - WebSockets 和 p5.js 教程”（https://www.youtube.com/watch?v=2hhEOGXcCvg）。我想利用 Matter.js 物理，所以我用 npm ( npm install matterjs) 安装了 matterjs。我想./node_modules/matterjs/dist/matter.js在我的 p5.js 草图中导入文件，但我想不出正确的方法。

这是我的文件结构的样子：

./server.js
./public/
   index.html
   sketch.js
./node_modules/
   matterjs/
      dist/
         matter.js

到目前为止，我已经尝试了以下方法：

1 . 将其视为matter.js常规 JS 文件并在其中添加相对路径index.html：

    ...
    <body>
      <script src="../node_modules/matterjs/dist/matter.js"></script>
      ...

sketch.js然后我尝试使用Matter该类 var Engine = Matter.Engine; 但这给了我一个“UnCaught ReferenceError: Matter is not defined ”

2 . 同样，包括 中的相对路径index.html，但这次在 中sketch.js，我尝试导入matter.js： import Matter from "matter";

这在导入行上给了我一个“意外的标识符”错误。Chrome 在下面放了一条红色波浪线Matter from "matter";

3 . 删除对matter.js文件的引用index.html，并将相对路径添加到导入行中sketch.js： import Matter from ""../node_modules/matterjs/dist/matter";

这给了我两个错误：

GET http://localhost:3000/node_modules/matterjs/dist/matter.js net::ERR_ABORTED 404 (Not Found)     localhost:
Uncaught SyntaxError: Unexpected identifier

作为参考，这是我的一些文件的样子：

服务器.js

var express = require('express')
var app = express()

// get the port number from the command line args
const port = (process.argv.length > 2) ? process.argv[2] : 3000

console.log("Starting server on port " + port)

var server = app.listen(port)
app.use(express.static('public'))

草图.js

/*jshint esversion: 8 */

import Matter from "matter"; // this changed as I was trying different things

// matter.js
var Engine = Matter.Engine;
...

索引.html

<!DOCTYPE html><html><head>
  <!-- root path to p5.js CDN: https://cdnjs.com/libraries/p5.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8">
</head>

<body>
  <script src="../node_modules/matterjs/dist/matter.js"></script> // this changed as I was trying different things
</body></html>

我知道我可以添加matter.js对 Web 上托管的文件的引用，但我想避免在同一个项目中管理两个不同的事项实例。

标签： javascriptnode.jsp5.jsmatter.js

解决方案

当您npm i打包时，它会将文件保存到本地 /node_modules/ 文件夹，以便 node.js 脚本可以在本地使用它。您正在尝试将本地服务器端文件与您的客户端一起使用，这将不起作用。

几个解决方案是：

  • （简单修复）使用 cdn 中的 matter.js，就像您在 p5.js 中所做的一样（https://cdnjs.com/libraries/matter-js）
  • 另一种方法是使用webpack之类的东西将所有资产捆绑在一起，然后托管。

推荐阅读