How to include a npm package in an HTML file?
Question
My HTML file:
<!DOCTYPE html>
<head>
...
</head>
<body>
...
<script src="script.js"></script>
</body>
My JavaScript file - 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:
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 answers
solution1
2 2020-05-12 13:53:48
require() is a NodeJS function, not a browser JS function. If the package uses npm, chances are its made for NodeJS and not browser JS.
If you want to include js files in the browser, you need to use html includes:
<script src="script.js"></script>
Or a templating solution which allows to include other files such as EJS
solution2
2 ACCPTED 2020-05-12 13:58:33
It's simple:
Just include the
FilePondcss & js file from CDN instead like:<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:
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>
solution3
1 2020-05-12 14:02:56
Actually, require() is for Node.js. You can't use it in browsers.
First solution:
Add the type="module" attribute to the <script> tag.
So it will be <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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.