javascript - 为什么我在 ES6 中的 Javascript 导入不起作用？意外的标记 *

Question

我目前正在尝试实现 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/'
});

我试图通过 google 搜索对此问题的答案，但似乎找不到解决方案。我对使用 Bable 编译 ES6 代码的事情很感兴趣。 ，但真的不知道..

感谢您的帮助! :)

Answer 1

如果您想在浏览器中使用 FilePond 并且您想要使用 ES 模块版本，您可以使用动态导入或类型为 module 的脚本标签。浏览器支持不是很好。

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

第三种选择是将 Rollup 或 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。