在Firefox中,ES2015导入不起作用(即使在顶层)
Chr*_*hka 65 javascript firefox ecmascript-6
这些是我的示例文件:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="t1.js"></script>
</head>
<body></body>
</html>
t1.js:
import Test from 't2.js';
t2.js:
export const Test = console.log("Hello world");
当我在Firefox 46中加载页面时,它返回"SyntaxError:import declarations可能只出现在模块的顶层" - 但我不确定import语句可以在这里获得多少顶级.此错误是否为红色鲱鱼,导入/导出是否尚不支持？
Tom*_*ica 100
实际上你得到的错误是因为你需要明确声明你正在加载一个模块 - 只允许使用模块:
<script src="t1.js" type="module"></script>
我在本文档中发现它在浏览器中使用ES6导入.推荐阅读.
完全支持这些浏览器版本(以及更高版本; caniuse.com上的完整列表):
- Firefox 60
- Chrome(桌面)65
- Chrome(安卓)66
- Safari 1.1
在较旧的浏览器中,您可能需要在浏览器中启用一些标志:
- Chrome Canary 60 - 落后于实验性Web平台旗帜
chrome:flags. - Firefox 54 -
dom.moduleScripts.enabled设置about:config. - Edge 15 - 实验JavaScript功能设置的背后
about:flags.
仍然记得ES6导入并没有得到广泛的支持,但是在开发过程中肯定是很好的,以节省您使用webpack编译项目所花费的时间.
Jos*_*eam 13
这不再准确. 目前所有浏览器都支持ES6模块
原答案如下
来自importMDN:
此功能目前未在本地任何浏览器中实现.它在许多转发器中实现,例如Traceur Compiler,Babel或Rollup.
浏览器不支持import.
这是浏览器支持表:
如果你想导入ES6模块,我建议使用一个转换器(例如,babel).
- @evolutionxbox:如果功能*没有被强制*,那么也没有标志. (4认同)
Ayu*_*ary 11
Modules work only via HTTP(s), not locally
如果您尝试通过file:// 协议在本地打开网页，您\xe2\x80\x99 会发现导入/导出指令不起作用。使用本地 Web 服务器（例如静态服务器）或使用编辑器的 \xe2\x80\x9clive server\xe2\x80\x9d 功能（例如 VS Code Live Server Extension）来测试模块。
\n您可以在这里参考： https: //javascript.info/modules-intro
\nLive server VS code extension链接： https: //marketplace.visualstudio.com/items?itemName =ritwickdey.LiveServer
在导入文件时仅使用 .js 文件扩展名解决了同样的问题（不要忘记type="module在脚本标记中设置）。
简单地写：
import foo from 'foo.js';
代替
import foo from 'foo';
| 归档时间： |
|
| 查看次数： |
60606 次 |
| 最近记录： |