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

问题描述

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

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

通过测试，我通过找到两种替代方法来使sketch.js文件正常工作，将其识别为问题：A）将p5.js库文件插入根目录，即项目文件夹（test_1）并直接调用它在 .html 文件中。例子：

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

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

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

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

最小示例代码结构：

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

标签： javascripthtmlatom-editorp5.js

解决方案

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

它可能行不通。如果您的服务器设置是正常的，只有公共的，并且它下面的文件夹可以从客户端访问。从客户的角度来看，公众是根本，没有什么比这更重要的了。

至于导入引导程序，请查看您是否可以浏览浏览器中可用的节点。它可能将您需要在客户端引用的脚本托管在另一个 URL 上。您还可以在 bower 文档/示例中找到该 URL。

您可以通过将脚本复制或符号链接到公共目录来解决此问题，但这有点不合时宜，如果您完全厌倦了寻找预期的方式，请保存它。

在此处查看更多详细信息：在 HTML 中引用父目录

到目前为止，我发现的最佳解决方案是基于 p5-manager npm 库。快速开始

$ npm install -g p5-manager

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

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

$ p5 new my_collection

通过运行此命令，它将创建一个集合目录和一些 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 学习之旅做好了准备。我希望你会发现这篇文章有帮助。

 └──     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

最后一点我保证：这个问题出现在很多地方，但仍然没有被那么多人解决。

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

问题描述

解决方案

推荐阅读