Вызов локального пакета JS с помощью NodeJS/npm
Я использую NodeJS и установил пакет table2csv через npm.
sudo npm install table2csv
Теперь я пытаюсь использовать этот пакет на веб-странице и не могу понять, как его правильно назвать, вот мой пример:
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<!--/var/www/node_modules/table2csv/dist/table2csv.min.js-->
<script src=”node_modules/table2csv/dist/table2csv.min.js”></script>
<script>function exportCSV(){
var csv = $("#fullDataTable").table2CSV();
window.location.href = 'data:text/csv;charset=UTF-8,'+ encodeURIComponent(csv);
}
</script>
</head>
<body>
<table id = "fullDataTable">
<thead>
<tr>
<th>Foo.</th>
<th>bar.</th>
<th>bla.</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<Button onclick = "exportCSV()">DOWNLOAD</button>
</body>
</html>
Полный путь к пакету — /var/www/node_modules/table2csv/dist/table2csv.min.js, и я пробовал такие варианты, как ../node_modules/table2csv/dist/table2csv.min.js, поскольку файл моей веб-страницы находится в /var/www/views.
(В настоящее время веб-страница отображается правильно, но ничего не происходит, когда я нажимаю кнопку Download)
Как правильно назвать пакет?
------ ОБНОВИТЬ ------
Вместо этого я добавил ссылку cdn, но функция/кнопка по-прежнему не работает.
<head>
<meta charset = "utf-8">
<!--/var/www/node_modules/table2csv/dist/table2csv.min.js-->
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/src/table2csv.min.js"></script>
<script>function exportCSV(){
var csv = $("#fullDataTable").table2CSV();
window.location.href = 'data:text/csv;charset=UTF-8,'+ encodeURIComponent(csv);
}
</script>
</head>
---- ОБНОВЛЕНИЕ 2 ----
Всегда импортируйте JQuery до, используя table2csv!
(проблема все еще не решена, так как библиотека не загружается
---- ОБНОВЛЕНИЕ 3 -----
При использовании ссылки cdn консоль выдала мне следующие ошибки
Uncaught SyntaxError: Unexpected token < table2csv.min.js:1 на <!doctype html>, что кажется странным, а также
Uncaught TypeError: document.getElementById(...).table2csv is not a function
at exportCSV (about:11)
at HTMLButtonElement.onclick (about:34)
в строке 11: var csv = document.getElementById('fullDataTable').table2csv();
---- ОБНОВЛЕНИЕ 4 ----
Я сдался и просто скопировал содержимое table2csv.js в блок <script> в своем html. Аллилуйя.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Работая с npm, вы попали в мир module (в отличие от статичного мира скриптов, к которому вы, вероятно, привыкли). Следовательно, папка, в которой находятся установленные пакеты, называется node-modules.
Модули обычно не влияют на глобальное пространство имен, что означает, что они не делают ничего доступным для глобального вызова, например. встроенный прослушиватель событий, например onclick = "".
Вы не можете напрямую ссылаться на какие-либо пакеты node_modules из вашего HTML, это было бы огромной проблемой безопасности, поскольку, как правило, node_modules не находится внутри вашего веб-сайта, и разрешение доступа к файлам и папкам за пределами вашего веб-сайта будет быть крайне ненадежным.
Теперь у вас есть три варианта:
Погрузитесь в мир модулей и сборщиков модулей, таких как веб-пакет. Это, вероятно, займет 3 месяца, чтобы понять и использовать, зная и понимая, что вы делаете. Если вы планируете активно разрабатывать Javascript, этого не избежать.
Скопируйте
/var/www/node_modules/table2csv/dist/table2csv.min.jsв папку вашего проекта и включите его так же, как ваши собственные Javascripts. Недостатком этого является то, что вам придется делать это вручную каждый раз, когда вы обновляете пакет.Найдите CDN (сеть доставки контента), в которой размещен нужный файл, и создайте ссылку на него оттуда.
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/table2csv.min.js" integrity = "sha256-O3PXZsVrc25oRq6k38cesC5NsdZOD/tMdjQXEWdaaZU = " crossorigin = "anonymous"></script>
Если я использую третий вариант, могу ли я по-прежнему использовать функцию «onClick»?