在客户端使用 npm 包

Question

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

中使用 dateformat(https://www.npmjs.com/package/dateformat) 包

Answer 1

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

"NW.js (previously known as node-webkit) lets you call all Node.js modules directly from DOM and enables a new way of writing applications with all Web technologies." http://nwjs.io/

Answer 2

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

Answer 3

我发现使用 Browserify 还不够。客户端仍然存在无法从库中找到 variables/functions 的问题。

以下是对我有用的步骤：

安装 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）并找到需要导出的主要函数（通常在顶部附近的某个地方）：

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')
);

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

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

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

在客户端使用 npm 包

Use npm package on client side

packages

node.js

npm