在客户端使用 npm 包答案

【问题标题】：Use npm package on client side在客户端使用 npm 包
【发布时间】：2016-05-06 10:41:27
【问题描述】：

有没有办法可以在客户端使用 npm 包？例如，我想在我的客户端 javascript 文件中使用 dateformat(https://www.npmjs.com/package/dateformat) 包

【问题讨论】：

【解决方案1】：

NPM 上的大多数包都是为服务器端设计的，由于安全原因，它们不能在客户端运行。您可以使用 NW.js，但用户必须在该计算机上安装您的软件。

“NW.js（以前称为 node-webkit）让您可以直接从 DOM 调用所有 Node.js 模块，并启用一种使用所有 Web 技术编写应用程序的新方式。” http://nwjs.io/

【讨论】：

【解决方案2】：

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

【讨论】：

但是有些包允许我直接使用全局变量。比如socket.io，当我把<script src="/socket.io/socket.io.js"></script>放到html文件中时，io变量就暴露出来了。我不需要将文件复制到公共目录。

【解决方案3】：

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

以下是对我有用的步骤：

安装 Browserify：

npm install -g browserify

从 npm 安装库（我将使用 leader-line 作为示例）：

npm i leader-line

您现在将在 node_modules 目录中拥有所需的所有 npm 文件：

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

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

这将在 node_modules 之外生成一个 bundle.js 文件：

这是我们可以引入前端的文件，就像我们使用普通的 JS 库一样。

所以，假设我将 bundle.js 文件添加到 libs 文件夹，并将 bundle.js 重命名为 leaderline.js，我可以简单地在 index.html 文件的标题中添加常用行：

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

注意在脚本标签中添加了type="module"。

但是，这还不够。最后一步是打开库的 JS 文件（在我的例子中是 leaderline.js）并找到需要导出的 main 函数（通常在顶部附近的某个地方）：

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

我需要 LeaderLine 在我的脚本中可用。为此，我们只需删除 var 并在函数名称前添加 window.，如下所示：

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

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

HTML：

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

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

有些人会争辩说，将函数暴露给窗口对于最佳实践来说过于“全局”。但另一种选择是使用模块捆绑器，它处理包的公开，这对于许多应用程序来说是多余的，特别是如果你想拼凑一个快速的前端来尝试一些东西。

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

考虑到从 npm 包中暴露前端功能是多么曲折，人们可以说今天的 JS 生态系统是一团糟。

【讨论】：