修改 JS 代碼以導入 ES 模塊以修復錯誤：Uncaught SyntaxError: Unexpected token 'export'

Question

此代碼工作正常，使用版本 3.0.3 的外部庫：

HTML：

<script src="https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@3.0.3/dist/index.min.js"></script>

<button id="emoji-button">Click Me</button>
<input type="text" id="input" />

Javascript：

const button = document.querySelector('#emoji-button');

const picker = new EmojiButton();
picker.on('emoji', emoji => {
    document.querySelector('#input').value += emoji;
});
button.addEventListener('click', () => {
picker.togglePicker(button);
});

新版本的庫（ https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@4.0.1/dist/index.min.js ）不再有效 - 因為我在 JS 中遇到錯誤：

未捕獲的 SyntaxError：意外的令牌“導出”

這是一個已知問題，開發人員確認：

從版本 4 開始，Emoji Button 僅導出為 ES 模塊

提出這個問題的人說：

我通過使用瀏覽器模塊功能找到了一種解決方法：

<script type='module' src="/js/emoji.js"></script>
import { EmojiButton } from '/js/vendor/emojibutton.min.js'

不幸的是，我不清楚如何調整適用於 3.0.3 的代碼以適用於版本 4+。

我試着改變這個：

<script src="https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@3.0.3/dist/index.min.js"></script>

對此：

<script type="module" src="https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@4.0.1/dist/index.min.js"></script>

但是從那里 - 我如何編輯我的 3.0.3 代碼以包含解決方法中提到的導入部分？

Answer 1

您可以在 javascript 文件中添加您的import ，您可以在其中使用導出。 您可以從 HTML 中刪除腳本標簽。

import {EmojiButton} from 'https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@4.0.1/dist/index.min.js';

const button = document.querySelector('#emoji-button');

const picker = new EmojiButton();
picker.on('emoji', emoji => {
    document.querySelector('#input').value += emoji;
  });
button.addEventListener('click', () => {
  picker.togglePicker(button);
});