SyntaxError：import声明只能出现在模块的顶层

Question

我正在尝试使用名为＆＃34; Simplebar＆＃34;在GitHub上找到GitHub SimpleBar，但在下载脚本并查看simple.js脚本后，看起来它有一个错误＆＃34;语法错误：导入声明可能只出现在模块的顶层＆＃34;

在simplebar.js文件的顶部有一些代码导入行：

import scrollbarWidth from 'scrollbarwidth'
import debounce from 'lodash.debounce'

import './simplebar.css'

如果我查看浏览器调试器，我会看到一个错误：＆＃34;语法错误：导入声明可能只出现在模块的顶层＆＃34;。

有没有人试过我们这个插件。

非常感谢你的时间。

Answer 1

我在Firefox（FF58）上得到了这个。我用以下方法解决了这个问题：

1. 它仍在Firefox上实验（来自v54）： 您必须在dom.moduleScripts.enabled
中将变量about:config设置为true

来源：Import page on mozilla (See Browser compatibility)

1. 将type="module"添加到导入js文件的脚本标记

<script type="module" src="appthatimports.js"></script>

1. 导入文件必须以（./，/，../或http://为前缀）

import * from "./mylib.js"

有关更多示例，此blog post很好。