Javascript 如何在HTML文件中包含npm包？

我的HTML文件：

...
...

我的JavaScript文件-

script.js

：

import*作为“FilePond”中的FilePond；
const myPond=FilePond.create({
多重：假，
名称：'filepond'
});
document.body.appendChild（pond.element）；

但出现了错误，浏览器说：

Uncaught SyntaxError: Cannot use import statement outside a module

Uncaught ReferenceError: require is not defined at script.js:1

因此，我将script.js编辑为：

const FilePon=require（'filepond'））
const myPond=FilePond.create({
多重：假，
名称：'filepond'
});
document.body.appendChild（pond.element）；

但错误再次出现，浏览器说：

Uncaught SyntaxError: Cannot use import statement outside a module

Uncaught ReferenceError: require is not defined at script.js:1

如何修复它？

require（）是一个NodeJS函数，而不是浏览器JS函数。 如果包使用npm，那么很可能是为NodeJ而不是浏览器JS制作的

如果要在浏览器中包含js文件，则需要使用html包含：

<script src="script.js"></script>

或者是一个模板解决方案，它允许包含其他文件，例如它很简单：

只需包含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>

实际上，

require（）

是用于Node.js的。您不能在浏览器中使用它。

第一个解决方案： 将

type=“module”

属性添加到

标记。
所以它将是

第二种解决方案： 只需在调用

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>
const myPond = FilePond.create({
    multiple: false,
    name: 'filepond'
});

document.body.appendChild(pond.element);
</script>


const myPond=FilePond.create({
多重：假，
名称：'filepond'
});
document.body.appendChild（pond.element）；
这个答案有用吗？您可以从ES6使用
导入
，但需要将js文件转换为浏览器支持的javascript。您需要
babel
来传输您的JS
require（）
用于Node.JS尝试将
更改为
所有答案都生效，但是如果我想使用npm为我的站点安装软件包呢？