Почему мой импорт Javascript в ES6 не работает?Неожиданный маркер *

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/'
});

Я пытался найти ответ на этот вопрос, но мне кажется, что я не могу найти решение этой проблемы.Я кое-что рассказал о компиляции кода ES6 с Bable , но на самом деле не знаю ..

Спасибо за вашу помощь!:)

Answer 1

Если вы хотите использовать FilePond в браузере И хотите использовать версию модуля ES, вы можете перейти к динамическому импорту или тегу скрипта с типом module.Поддержка браузера не является фантастической.

Другой вариант - использовать версию библиотеки UMD и просто включить тег скрипта, как описано в документации.

Третий вариант - использовать сведениеили 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 также не требуется.