文章/答案/技术大牛

发布

社区首页 >问答首页 >无法使用..\路径语法从atom中的父目录访问p5.js库

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

Stack Overflow用户

提问于 2020-12-13 21:21:46

回答 2查看 377关注 0票数 1

最近，我在Atom ide中使用p5.js，并尝试使用从其网站下载的本地p5.js库。作为一个最小的例子，我尝试使用atom联机web服务器包( atom -live plus)并引用位于atom项目父文件夹中的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)在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文件中的父文件夹库。请你对我的问题提供任何见解好吗？

最小示例代码结构：

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

javascript

html

atom-editor

p5.js

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-03-14 16:46:47

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

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

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

您可以通过将脚本复制或符号链接到公共目录来解决这个问题，但这可能有点麻烦，如果您对找到预期的方法感到厌倦，请保存它。

请参阅这里的详细信息：Referencing a parent directory in HTML

到目前为止，我找到的最好的解决方案是基于P5经理npm库。快速入门

$ npm install -g p5-manager

有几个P5-经理的用例，在更进一步之前，选择一个最好的描述您的需求并继续前进。

步骤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-管理器将完成其余的工作。服务器默认支持活动重新加载。(注意:您应该在集合目录中运行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

最后注:我保证:这个问题出现在许多地方，但仍然没有被很多人解决。

票数 1

Stack Overflow用户

发布于 2022-07-07 12:41:23

该文件名为p5.min.js，而不是p5.js。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65280819

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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