如何在 HTML 文件中包含 npm package？
[英]How to include a npm package in an HTML file?
问题描述
My HTML file:
我的 HTML 文件：
<!DOCTYPE html>
<head>
...
</head>
<body>
...
<script src="script.js"></script>
</body>
My JavaScript file - script.js :我的 JavaScript 文件 - script.js ：
import * as FilePond from 'filepond';
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(pond.element);
But error occurred, the browser said:但是出现错误，浏览器说：
Uncaught SyntaxError: Cannot use import statement outside a module
So I edited the script.js into this:所以我将 script.js 编辑成这样：
const FilePon = require('filepond')
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(pond.element);
But error occurred again, the browser said:但是又出现了错误，浏览器说：
Uncaught ReferenceError: require is not defined at script.js:1
How can I fix it?我该如何解决？
3 个解决方案
解决方案1
2 2020-05-12 13:53:48
require() is a NodeJS function, not a browser JS function. require() 是 NodeJS function，而不是浏览器 JS function。 If the package uses npm, chances are its made for NodeJS and not browser JS.如果 package 使用 npm，那么它很可能是为 NodeJS 而不是浏览器 JS 设计的。
If you want to include js files in the browser, you need to use html includes:如果要在浏览器中包含js文件，需要使用html包括：
<script src="script.js"></script>
Or a templating solution which allows to include other files such as EJS或允许包含其他文件（例如EJS ）的模板解决方案
解决方案2
2 已采纳 2020-05-12 13:58:33
It's simple:这很简单：
Just include the
FilePondcss & js file from CDN instead like:只需包含来自 CDN 的FilePond8CBA22E28EB17B5F5C6AE2A266AZ & js 文件，例如：<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet"> <script src="https://unpkg.com/filepond/dist/filepond.js"></script>Next, you do not need any import or require.
接下来，您不需要任何导入或要求。 You can simply use the rest of the code as FilePondis globaly declared now like:您可以简单地使用代码的 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>
解决方案3
1 2020-05-12 14:02:56
Actually, require() is for Node.js.实际上， require()是针对 Node.js 的。 You can't use it in browsers.您不能在浏览器中使用它。
First solution:第一个解决方案：
Add the type="module" attribute to the <script> tag.将type="module"属性添加到<script>标记。
So it will be <script type="module" src="script.js"></script>所以它将是<script type="module" src="script.js"></script>
Second solution:第二种解决方案：
Just add <script src="https://cdn.jsdelivr.net/npm/filepond@4.13.6/dist/filepond.js"></script> and <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet"> before calling 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.js之前<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
I think this will work for you:我认为这对你有用：
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.