如何在 HTML 中将 NPM 包用作普通的 javascript

Posted 2023-03-05

【中文标题】如何在 HTML 中将 NPM 包用作普通的 javascript

【英文标题】：How to use NPM package as normal javascript in HTML

【发布时间】：2020-04-06 14:08:17

【问题描述】：

我想在我的应用程序中使用 html2canvas JS 库。通过在我的 HTML 文件中直接加载 html2canvas.js 文件，我能够在我的应用程序中使用旧版本的 html2canvas。

但仅通过 npm 包支持较新的版本。

当我尝试在我的 HTML 文件中包含较新的 html2canvas.js 时，它显示

html2canvas 未定义

我曾尝试修改 html2canvas.js 文件，以便我可以直接在我的 HTML 文件中使用它，而无需使用任何其他包管理器或其他依赖项。

我从here 下载了html2canvas。我无法通过直接在 HTML 文件中加载这个文件来使用它。如下

<script type="text/javascript" src="js/html2canvas.js"></script>

【问题讨论】：

npm install ，您可以通过 node_modules 文件夹进行引用。打开它，找到你感兴趣的包，然后在脚本标签中运行目标文件。类似的东西：<script type="text/javascript" src="node_modules/html2canvas/dist/html2canvas.js"></script>

在撰写此问题时只是一个错字。实际上我的应用程序是静态 HTML 应用程序。我根本没有使用任何 npm、nodejs 的东西。我已经从给定的链接下载了 html2canvas，我想像以前一样直接在我的 HTML 中使用它（旧版本的 html2canvas）

您仍然可以将 npm 与静态 html 应用程序一起使用。见安东尼的回答。

也许这可以帮助https://wesbos.com/javascript-modules/

我认为你使用这个文件的方式不太对；你见过这个吗？ github.com/niklasvh/html2canvas/blob/master/examples/…

【参考方案1】：

npm 安装的包位于/node_modules/，前端不能直接使用。要使用这些模块，您需要使用 ES6 语法并使用以下代码导入它们：

// Just an example, you need to read the doc to see how to import
import html2cavas from "html2cavas"

但是，浏览器不能直接读取 ES6 语法。因此，您需要使用 Babel 将您的 ES6 代码转换为普通的 JS 代码。见https://hackernoon.com/use-es6-javascript-syntax-require-import-etc-in-your-front-end-project-5eefcef745c2

转译代码后，使用<script> 标签导入转译代码。

或者，您可以从 /node_modules/ 复制您需要的内容并将其复制到您的 js 文件夹中。不过不推荐。

【讨论】：

这个答案给了我很好的洞察力，如果有人想用一个例子来总结这篇文章，那就太好了。

【参考方案2】：

您可以将 CDN 用于此类库。在这种情况下，请在此处查看：https://cdnjs.com/libraries/html2canvas

您应该在那里找到一个用于生产和常规开发的。 (https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js) =>开发

<script>
  const htmlCanvas = require("htmlcanvas")
</script>

【讨论】：

如我在问题中提到的，支持旧版本。但是较新的版本不是这样工作的。

您好 Agrawal，您可以使用页面版本选择上的下拉菜单，但带有 cdn 的最新版本是 0.0.5，这可能不是您需要的。

CDN 并不是使用此类 JS 库的唯一方法。我正在使用从 html2canvas 官方发布页面下载的离线文件，即。 github.com/niklasvh/html2canvas/releases

如果它说“你可以”而不是“你通常会”，我会赞成这个，因为它取决于用例。 unpkg 将提供最新版本：unpkg.com/html2canvas