Node.js 在客户端使用npm包

有没有办法在客户端使用npm包？例如，我想在我的客户端javascript文件中使用

dateformat

（）包NPM上的大多数包都是为服务器端设计的，由于安全原因无法在客户端工作。您可以使用NW.js，但用户必须在那里的计算机上安装您的软件

“NW.js（以前称为node webkit）允许您直接从DOM调用所有node.js模块，并支持使用所有Web技术编写应用程序的新方法。”

---

如果您想在客户机上使用NPM，您可以考虑使用为此目的而设计的NPM。节点模块系统与浏览器不兼容，因此browserify将javascript转换为可以工作的内容。因此取名为：browserify。

我发现仅仅使用browserify是不够的。客户端没有从库中找到变量/函数仍然存在问题

以下是对我有效的步骤：

安装Browserify：

npm install -g browserify

<div id="start">start</div>
<div id="end">end</div>

从npm安装库（我将使用引线作为示例）：

现在，您将在节点模块目录中拥有所需的所有npm文件：

现在，我们可以运行常用的Browserify命令来绑定npm包中的JS文件：

browserify node_modules/leader-line/leader-line.min.js -o bundle.js

这将在node_模块外部生成一个bundle.js文件：

这是我们可以带到前端的文件，就像我们使用通常的JS库一样

因此，假设我将bundle.js文件添加到libs文件夹，并将bundle.js重命名为leaderline.js，我只需在

index.html

文件的标题中添加一行：

<script src="libs/leaderline.js" type="module"></script>

我需要在脚本中提供LeaderLine。为了实现这一点，我们只需删除

var

并在函数名前面添加

窗口。

，如下所示：

window.LeaderLine=function(){"use strict";var te,g,y,S,_,o,t,h,f,p,a,i,l,v="leader-line"

现在，我可以毫无问题地使用库客户端：

HTML：

npm install -g browserify

<div id="start">start</div>
<div id="end">end</div>

有些人会认为，将函数公开给窗口对于最佳实践来说太“全局”了。但是另一种选择是使用模块绑定器，它处理包的公开，这对于许多应用程序来说是过度的，特别是当您试图快速组合一个前端来尝试一些东西时

我觉得奇怪的是，现在有这么多人在npm中发布软件包，这些软件包显然是针对前端的（例如，显然没有人会在后端节点中使用leaderline.js，但这是发布软件包的地方，没有可用的CDN）

---

考虑到从npm包中公开前端功能是多么的困难，我们可以说现在的JS生态系统一团糟。

moment.JS是上述功能的一个很好的客户端实现。。可能重复，但某些包允许我直接使用全局变量。例如

socket.io

，当我将

放入html文件中时，

io

变量被公开。我不需要将文件复制到公共目录。

new LeaderLine(
    document.getElementById('start'),
    document.getElementById('end')
);