如何在 HTML 文件中包含 npm 包？
Posted
技术标签:
【中文标题】如何在 HTML 文件中包含 npm 包？【英文标题】：How to include a npm package in an HTML file? 【发布时间】：2020-08-28 09:31:09 【问题描述】：我的 html 文件：
<!DOCTYPE html>
<head>
...
</head>
<body>
...
<script src="script.js"></script>
</body>
我的 javascript 文件 - script.js:
import * as FilePond from 'filepond';
const myPond = FilePond.create(
multiple: false,
name: 'filepond'
);
document.body.appendChild(pond.element);
但是发生了错误，浏览器说：
Uncaught SyntaxError: Cannot use import statement outside a module
所以我将 script.js 编辑成这样：
const FilePon = require('filepond')
const myPond = FilePond.create(
multiple: false,
name: 'filepond'
);
document.body.appendChild(pond.element);
但又出现错误，浏览器提示：
Uncaught ReferenceError: require is not defined at script.js:1
我该如何解决？
【问题讨论】：
***.com/a/19059825/5064324 这个答案有帮助吗？ 您可以使用 ES6 中的import，但您需要将 js 文件转换为浏览器支持的 javascript。你需要 babel 来编译你的 JS
require() 与 Node.js 一起使用
尝试将<script src="script.js"></script>改为<script type="module" src="script.js"></script>
【参考方案1】：
实际上，require() 是针对 Node.js 的。您不能在浏览器中使用它。
第一个解决方案：
将type="module" 属性添加到<script> 标记。
所以会是<script type="module" src="script.js"></script>
第二种解决方案：
在调用script.js之前添加<script src="https://cdn.jsdelivr.net/npm/filepond@4.13.6/dist/filepond.js"></script>和<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
我认为这对你有用：
<script src="https://cdn.jsdelivr.net/npm/filepond@4.13.6/dist/filepond.js"></script>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script>
const myPond = FilePond.create(
multiple: false,
name: 'filepond'
);
document.body.appendChild(pond.element);
</script>
【讨论】：
【参考方案2】：很简单：
只需包含来自 CDN 的 FilePond css & js 文件，例如：
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
接下来，您不需要任何导入或要求。您可以简单地使用其余代码，因为 FilePond 现在已全局声明，如下所示：
const myPond = FilePond.create(
multiple: false,
name: 'filepond'
);
document.body.appendChild(myPond.element);<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>【讨论】：
所有答案都生效了，但是如果我想使用 npm 为我的站点安装包怎么办？【参考方案3】：require() 是 NodeJS 函数，而不是浏览器 JS 函数。 如果包使用 npm，则很可能是为 NodeJS 而不是浏览器 JS。
如果要在浏览器中包含js文件，需要使用html包含：
<script src="script.js"></script>
或允许包含其他文件的模板解决方案，例如 EJS
【讨论】：
以上是关于如何在 HTML 文件中包含 npm 包？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 VSCode 扩展包中包含 node_modules 文件夹？