无法使用 ..\ 路径语法从原子中的父目录访问 p5.js 库

Question

我最近一直在 Atom ide 中的 p5.js 工作，并且一直在尝试使用从他们的网站下载的本地 p5.js 库。作为一个最小的例子，我尝试使用 atom 在线 Web 服务器包 (atom-live-server-plus) 并通过引用位于原子项目的父文件夹。这样我只需要 p5.js 库的一个副本，我所有的 p5.js 项目都可以引用同一个库，而无需重复。问题：我一直无法执行代码，因为当我使用“..”语法在 .html 文件中指定 p5.js 库位置时出现问题。示例：

<script src="..\libraries\p5.js"></script>.

通过测试，我找到了使 sketch.js 文件正常工作的两种替代方法，从而 ide 确定这是一个问题： a) 将p5.js库文件插入根目录，即工程文件夹(test_1)，直接在.html文件中调用。示例：

<script src="p5.js"></script>

B) 在 the.html 文件中调用 p5.js 库的在线 http: 网站版本。示例：

<script src=https://Unpkg.com/p5></script>

在这两种情况下，sketch.js 文件都会按预期加载到在线服务器上。但是，我想了解为什么描述父文件夹路径的语法“..”不起作用，特别是因为我最近下载了衍生式设计书籍代码示例 (https://github.com/generative-design/Code-Package-p5.js)，这需要大量的库到运行每个代码自己的 sketch.js 文件，因此我最感兴趣的是使用本地库文件夹并将其保存在父文件夹中，而不是将其复制到每个单独的代码项目的目录中。因此，我需要找到一种方法来引用 .html 文件中的父文件夹库。请问您能否提供ide对我的问题的任何见解？

最小示例代码结构：

p5_work
 |
 +-- libraries
 |  |  
 |  +-- p5.sound.js
 |  |    
 |  +-- p5.js
 |    
 +-- test_1 (Atom project)
    |    
    +-- index.html
    |    
    +-- sketch.js

index.html代码：

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>p5.js test_1 example</title>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
  </style>
  <script src="..\libraries\p5.js"></script>
  <script src="sketch.js"></script>
</head>

<body>
  <main>
  </main>
</body>

</html>

sketch.js代码：

function setup() {
  createCanvas(720, 400);
  background(0);
}

function draw() {
    fill(255,0,0)
    ellipse(50, 50, 80, 80);
}

Answer 1

虽然我没有资格回答任何关于 JavaScript 和 P5 的问题。我试图建立一个类似于我一直使用 Python 做的存储库，然后我遇到了这个问题。这几乎让我退出了 P5 学习项目。在阅读了很多很多文章后，我发现了以下内容：

It probably won't work. If your server setup is normal only public and the folders below it are accessible from the client-side. From the client's point of view, the public is the root, there is nothing above that.

As for importing bootstrap, see if you can browse what node is making available in your browser. It's probably hosting the scripts you need to reference on the client-side at another URL. You might also find the URL in the bower documentation/examples.

You could solve this by copying or symlinking the scripts into the public directory, but that would be a bit hackish, save it for if you get completely fed up with finding the intended way.

在此处查看更多详细信息：

目前我找到的最佳解决方案是基于 p5-manager npm 库。快速入门

$ npm install -g p5-manager

p5-manager 有几个用例，在继续之前，选择最能描述您的要求的一个然后继续。

步骤 1：初始化一个新集合

$ p5 new my_collection

通过运行ning这个命令，它会创建一个集合目录和一些p5库。查看输出日志：

# create : my_collection 
# create : my_collection/libraries 
# create : my_collection/libraries/p5.js 
# ...

步骤 2：生成 p5 项目

$ cd my_collection
$ p5 generate my_project
# or... 
$ p5 g my_project

这将生成一个包含默认模板的 p5 项目文件夹。（确保您运行在集合目录中执行此命令。）

# create : my_project 
# create : my_project/sketch.js 
# create : my_project/index.html

第 3 步：启动服务器，玩得开心！

$ p5 server
# or... 
$ p5 s

现在编辑您的 sketch.js 并转到 localhost:5555，然后 p5-manager 将完成剩下的工作。服务器默认支持实时重新加载。（注意：您应该运行集合目录中的 p5 服务器，而不是项目目录。）更多细节在这里： https://www.npmjs.com/package/p5-manager

现在，我可以运行引用相同 index.html 的草图。我之前的设置是为每个草图创建 P5 库的多个下载。但现在我克服了这个问题，结构已经为我的 P5 学习之旅做好了准备。我希望你会发现这个 post 有用。

 └──     Library/
 │  ├────     index.html
 │  └────     sketch.js
 ├──     LICENSE
 ├──     README.md
 └──     database/
 └──     develop/
 └──     libraries/
 │  ├────     p5.dom.js
 │  ├────     p5.js
 │  └────     p5.sound.js
 └──     node_modules/
 └──     notes/
 ├──     package-lock.json
 ├──     package.json
 └──     services/
 └──     src/
 │  ├────     index.html
 │  └────     sketch.js
 └──     testing/
 └──     typescript

最后声明我保证：这个问题在很多地方都出现过，而且还没有解决那么多。

https://discourse.processing.org/t/p5-js-not-found-in-parent-directory/21981

无法使用 ..\ 路径语法从原子中的父目录访问 p5.js 库

Unable to access p5.js library from parent directory in atom using ..\ path syntax

javascript

html

atom-editor

p5.js