Невозможно получить доступ к библиотеке p5.js из родительского каталога в атоме, используя синтаксис пути ..\
Недавно я работал с p5.js в Atom ide и пытался использовать локальную библиотеку p5.js, загруженную с их веб-сайта. В качестве минимального примера я попытался выполнить базовый файл sketch.js, используя пакет онлайн-веб-сервера Atom (atom-live-server-plus) и обратившись к библиотеке p5.js, расположенной в родительской папке атомный проект. Таким образом, мне нужна только одна копия библиотеки p5.js, и все мои многочисленные проекты p5.js могут ссылаться на одну и ту же библиотеку без необходимости ее повторения. Проблема: мне не удалось выполнить код, поскольку возникает проблема, когда я указываю расположение библиотеки p5.js в файле .html, используя синтаксис '..'. Пример:
<script src = "..\libraries\p5.js"></script>.
С помощью тестов мне удалось определить это как проблему, найдя два альтернативных метода заставить файл sketch.js работать: А) вставить файл библиотеки p5.js в корневой каталог, т.е. в папку проекта (test_1) и вызвать его прямо в .html файле. Пример:
<script src = "p5.js"></script>
Б) Вызвать онлайн-версию библиотеки p5.js на веб-сайте http: в файле .html. Пример:
<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 [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Хотя я не настолько квалифицирован, чтобы отвечать на любые вопросы, касающиеся JavaScript и P5. Я попытался создать репозиторий, похожий на тот, который я всегда делаю с Python, и столкнулся с этой проблемой. Что чуть не заставило меня бросить учебный проект P5. Прочитав много-много статей, я нашел следующее:
Вероятно, это не сработает. Если настройка вашего сервера обычная, только публичная и папки под ним доступны со стороны клиента. Из точка зрения клиента, общественность является корнем, нет ничего выше что.
Что касается импорта начальной загрузки, посмотрите, можете ли вы просмотреть, что делает узел. доступны в вашем браузере. Вероятно, на нем размещены нужные вам скрипты. для ссылки на стороне клиента по другому URL-адресу. Вы также можете найти 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
Последнее замечание, которое я обещаю: эти проблемы возникали во многих местах, и до сих пор не так много решены.
Файл называется p5.min.js, а не p5.js.
Вы пробовали
../вместо..`? The windows operating system used` для каталогов пути, но большинство приложений используют/для обозначения каталогов пути