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

Question

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

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

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

html2canvas is not defined

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

我从 here 下载了 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 文件夹。但不建议这样做。