如何在 HTML 中像普通 javascript 一样使用 NPM 包

Question

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

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

当我尝试在我的 HTML 文件中包含更新的 html2canvas.js 时，它说

html2canvas 未定义

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

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

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

Answer 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 文件夹中。不过不推荐。

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