Question

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

Answer 1

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

Answer 2

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

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

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

JS

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

有些人会争辩说，将函数暴露给窗口对于最佳实践来说过于“全局”。但另一种选择是使用模块打包器，它处理包的暴露，这对于许多应用程序来说是过度的，尤其是当您试图将快速前端组合在一起进行尝试时。

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

鉴于从 npm 包中公开前端功能是多么曲折，可以说今天的 JS 生态系统一团糟。