在客户端使用npm包

Question

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

Answer 1

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

Answer 2

我发现仅使用 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"请注意script 标记中添加了。

然而，这还不够。最后一步是打开库的 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')
);

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

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

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