为什么我在ES6中导入Javascript无法正常工作？意外的标记 *

Question

im目前正在尝试在我的项目中实施FilePond。我已经尝试通过npm安装来实现它，但是以某种方式，我的浏览器会不断抛出此错误：

Uncaught SyntaxError: Unexpected token *

我猜想它与ES6有关，但我不知道如何解决它。 我的Javascript代码如下：

import * as FilePond from 'filepond';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';

FilePond.registerPlugin(
    FilePondPluginImagePreview()
);

const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create( inputElement,{
    allowImagePreview: true,

});

FilePond.setOptions({
    server: 'test/'
});

我试图用谷歌找到答案，但似乎找不到解决方案。我已经用Bable编译ES6代码有些麻烦了，但是我真的不知道。

谢谢您的帮助！ ：）

Answer 1

如果要在浏览器中使用FilePond并且要使用ES模块版本，则可以进行动态导入或输入module类型的脚本标签。浏览器支持并不出色。

另一种选择是使用库的UMD版本，并按照文档中的描述简单地包含script标签。

第三个选项是将Baupup或Webpack与Babel一起使用。

动态导入

<link href="./filepond.css" rel="stylesheet">
<input type="file"/>

<script>
import('./filepond.esm.js').then(FilePond => {
  FilePond.create(document.querySelector('input'));
});
</script>

类型模块

<link href="./filepond.css" rel="stylesheet">
<input type="file"/>

<script type="module" src="./filepond.esm.js"></script>
<script>
document.addEventListener('FilePond:loaded', e => {
    const FilePond = e.detail;
    FilePond.create(document.querySelector('input'));
})
</script>

其他一些笔记

FilePond.registerPlugin(
    FilePondPluginImagePreview()
);

删除()，不需要这些。

const pond = FilePond.create( inputElement,{
    allowImagePreview: true,
});

插件会自动启用，因此也不需要将allowImagePreview设置为true。