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

Question

我的 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

我该如何解决？

Answer 1

require() 是 NodeJS function，而不是浏览器 JS function。 如果 package 使用 npm，那么它很可能是为 NodeJS 而不是浏览器 JS 设计的。

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

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

或允许包含其他文件（例如EJS ）的模板解决方案

Answer 2

这很简单：

只需包含来自 CDN 的FilePond 8CBA22E28EB17B5F5C6AE2A266AZ & js 文件，例如：

 <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet"> <script src="https://unpkg.com/filepond/dist/filepond.js"></script>

接下来，您不需要任何导入或要求。 您可以简单地使用代码的 rest，因为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>

Answer 3

实际上， require()是针对 Node.js 的。 您不能在浏览器中使用它。

第一个解决方案：

将type="module"属性添加到<script>标记。
所以它将是<script type="module" src="script.js"></script>

第二种解决方案：

只需添加<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.js之前<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>

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

问题描述

3 个解决方案

解决方案1
2 2020-05-12 13:53:48

解决方案2
2 已采纳 2020-05-12 13:58:33

解决方案3
1 2020-05-12 14:02:56

第一个解决方案：

第二种解决方案：

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

问题描述

3 个解决方案

解决方案1 2 2020-05-12 13:53:48

解决方案2 2 已采纳 2020-05-12 13:58:33

解决方案3 1 2020-05-12 14:02:56

第一个解决方案：

第二种解决方案：

解决方案1
2 2020-05-12 13:53:48

解决方案2
2 已采纳 2020-05-12 13:58:33

解决方案3
1 2020-05-12 14:02:56