使用NodeJS / npm调用本地JS包

Question

I am running NodeJS and have installed the table2csv package via npm 我正在运行NodeJS并通过npm安装了table2csv软件包

 sudo npm install table2csv

Now I'm trying to use this package in a web page and I can't work out how to call it correctly, here's my example: 现在我正试图在网页中使用这个包，我无法弄清楚如何正确调用它，这是我的例子：

<!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>

The full path to the package is /var/www/node_modules/table2csv/dist/table2csv.min.js and I have tried variations such as ../node_modules/table2csv/dist/table2csv.min.js as my web page file is in /var/www/views . 包的完整路径是/var/www/node_modules/table2csv/dist/table2csv.min.js ，我尝试过各种变体，例如../node_modules/table2csv/dist/table2csv.min.js因为我的网页文件是在/var/www/views 。

(Currently the web page appears correctly but nothing happens when I click the Download button) （目前网页显示正确，但单击“ Download按钮时没有任何反应）

How do I properly call the package? 我该如何正确地打电话给包裹？

------ UPDATE ------ ------更新------

I added a cdn link instead but the function/button still does not appear to be working 我添加了一个cdn链接，但功能/按钮似乎仍然没有工作

<head>
<meta charset="utf-8">
<!--/var/www/node_modules/table2csv/dist/table2csv.min.js-->
<script src="https://cdn.jsdelivr.net/npm/table2csv@1.1.3/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>

---- UPDATE 2 ---- ----更新2 ----

Always import JQuery before using table2csv! 在使用table2csv 之前始终导入JQuery！

(the problem still isn't fixed though as the library won't load （问题仍然没有解决，因为库不会加载

---- UPDATE 3 ----- ----更新3 -----

While using a cdn link the console gave me the following errors 在使用cdn链接时，控制台给了我以下错误

Uncaught SyntaxError: Unexpected token < table2csv.min.js:1 on <!doctype html> which seems odd as well as Uncaught SyntaxError: Unexpected token < table2csv.min.js:1 <!doctype html>上出现Uncaught SyntaxError: Unexpected token < table2csv.min.js:1 ，这似乎很奇怪

Uncaught TypeError: document.getElementById(...).table2csv is not a function
at exportCSV (about:11)
at HTMLButtonElement.onclick (about:34)

on line 11 : var csv = document.getElementById('fullDataTable').table2csv(); 第11行： var csv = document.getElementById('fullDataTable').table2csv();

---- UPDATE 4---- ----更新4 ----

I gave up and just copied the contents of table2csv.js into a <script> block in my html. 我放弃了，只是将table2csv.js的内容复制到我的html中的<script>块中。 Hallelujah. 哈利路亚！

Answer 1

When working with npm you have arrived in a module world (as opposed to the static script world you're probably used to). 当你使用npm你已经进入了一个module世界（而不是你可能习惯的静态脚本世界）。 Hence the folder where the installed packages reside is named node-modules . 因此，安装的软件包所在的文件夹名为node-modules 。

Modules generally don't affect the global namespace, which means they do not make anything available to call globally in eg an inline event listener like onclick="" . 模块通常不会影响全局命名空间，这意味着它们不会使任何可用的内容在全局调用，例如内联事件监听器，如onclick="" 。

You cannot directly reference any node_modules packages from your HTML, that would be a huge security problem as generally node_modules is not inside your webroot, and allowing access to files and folders outside your webroot would be extremely unsecure. 您不能直接引用HTML中的任何node_modules包，这将是一个巨大的安全问题，因为通常node_modules不在您的webroot中，并且允许访问webroot之外的文件和文件夹将是非常不安全的。

You have three options now: 您现在有三个选择：

Take a deep dive into the world of modules and module bundlers like webpack . 深入了解webpack等模块和模块捆绑器的世界。 This will probably take 3 months to understand and use while knowing and understanding what you're doing. 在了解和理解您正在做的事情的同时，这可能需要3个月才能理解和使用。 If you plan to do heavy Javascript development, there's no way around this. 如果你打算做大量的Javascript开发，那就没办法了。
Copy /var/www/node_modules/table2csv/dist/table2csv.min.js to you project folder and include it just like your own Javascripts. 将/var/www/node_modules/table2csv/dist/table2csv.min.js复制到项目文件夹，并将其包含在您自己的Javascripts中。 This has the downside that you will have to do this manually each time you update the package. 这样做的缺点是每次更新软件包时都必须手动执行此操作。
Find a CDN (Content Delivery Network) that hosts the file you need, and reference it from there. 找到托管您需要的文件的CDN（内容交付网络），并从那里引用它。
```
 <script src="https://cdn.jsdelivr.net/npm/table2csv@1.1.3/dist/table2csv.min.js" integrity="sha256-O3PXZsVrc25oRq6k38cesC5NsdZOD/tMdjQXEWdaaZU=" crossorigin="anonymous"></script> 
```

使用NodeJS / npm调用本地JS包

问题描述

1 个解决方案

解决方案1
3 已采纳 2019-01-22 14:35:22

使用NodeJS / npm调用本地JS包

问题描述

1 个解决方案

解决方案1 3 已采纳 2019-01-22 14:35:22

解决方案1
3 已采纳 2019-01-22 14:35:22