Javascript ES2015 导入在 Firefox 中不起作用（即使在顶级）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37624819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ES2015 import doesn't work (even at top-level) in Firefox
提问by Christoph Burschka
These are my sample files:
这些是我的示例文件：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="t1.js"></script>
</head>
<body></body>
</html>
t1.js:
t1.js：
import Test from 't2.js';
t2.js:
t2.js：
export const Test = console.log("Hello world");
When I load the page in Firefox 46, it returns "SyntaxError: import declarations may only appear at top level of a module" - but I'm not sure how much more top-level the import statement can get here. Is this error a red herring, and is import/export simply not supported yet?
当我在 Firefox 46 中加载页面时，它返回“SyntaxError：import 声明可能只出现在模块的顶层” - 但我不确定 import 语句可以在这里获得多少顶层。这个错误是否是一个红鲱鱼，是否还根本不支持导入/导出？
回答by Tomá? Zato - Reinstate Monica
Actually the error you got was because you need to explicitly state that you're loading a module - only then the use of modules is allowed:
实际上你得到的错误是因为你需要明确声明你正在加载一个模块 - 只有这样才允许使用模块：
<script src="t1.js" type="module"></script>
I found it in this document about using ES6 import in browser. Recommended reading.
我在这篇关于在浏览器中使用 ES6 导入的文档中找到了它。推荐阅读。
Fully supported in those browser versions (and later; full list on caniuse.com):
这些浏览器版本完全支持（及更高版本；caniuse.com上的完整列表）：
- Firefox 60
- Chrome (desktop) 65
- Chrome (android) 66
- Safari 1.1
- 火狐 60
- 铬（桌面）65
- 铬（安卓）66
- Safari 1.1
In older browsers you might need to enable some flags in browsers:
在较旧的浏览器中，您可能需要在浏览器中启用一些标志：
- Chrome Canary 60 – behind the Experimental Web Platform flag in
chrome:flags. - Firefox 54 –
dom.moduleScripts.enabledsetting inabout:config. - Edge 15 – behind the Experimental JavaScript Features setting in
about:flags.
- Chrome Canary 60 – 在
chrome:flags. - Firefox 54 –
dom.moduleScripts.enabled在about:config. - Edge 15 – 在
about:flags.
回答by Josh Beam
This is not accurate anymore.All current browsers now support ES6 modules
这已经不准确了。当前所有浏览器现在都支持 ES6 模块
Original answer below
原答案如下
From importon MDN:
This feature is not implemented in any browsers natively at this time. It is implemented in many transpilers, such as the Traceur Compiler, Babel or Rollup.
此功能目前未在任何浏览器中实现。它在许多转译器中实现，例如 Traceur Compiler、Babel 或 Rollup。
Browsers do not support import.
浏览器不支持import.
Here is the browser support table:
这是浏览器支持表：
If you want to import ES6 modules, I would suggest using a transpiler (for example, babel).
如果您想导入 ES6 模块，我建议您使用转译器（例如babel）。
回答by S. K. Biswas
you have to specify it's type in script and export have to be default ..for ex in your case it should be,
你必须在脚本中指定它的类型并且导出必须是默认的..对于你的例子来说应该是，
<script src='t1.js' type='module'>
for t2.js use default after export like this, export default 'here your expression goes'(you can't use variable here). you can use function like this,
对于 t2.js 像这样导出后使用默认值，导出默认值 'here your expressiongoing '(you can't use variable here)。你可以使用这样的功能，
export default function print(){ return console.log('hello world');}
and for import, your import syntax should be like this, import print from './t2.js' (use file extension and ./ for same directory)..I hope this would be useful to you!
对于导入，您的导入语法应该是这样的， 从 './t2.js' 导入打印（使用文件扩展名和 ./ 用于同一目录）..我希望这对您有用！
回答by krmld
Just using .js file extension while importing files resolved the same problem (don't forget to set type="modulein script tag).
在导入文件时使用 .js 文件扩展名解决了同样的问题（不要忘记type="module在脚本标签中设置）。
Simply write:
简单地写：
import foo from 'foo.js';
instead of
代替
import foo from 'foo';
回答by Paul Fabing
For the sake of argument...
为了辩论...
One could add a custom module interface to the global window object. Although, it is not recommended. On the other hand, the DOM is already broken and nothing persists. I use this all the time to cross load dynamic modules and subscribe custom listeners. This is probably not an answer- but it works. Stack overflow now has a module.export that calls an event called 'Spork' - at lest until refresh...
可以向全局窗口对象添加自定义模块接口。虽然，不推荐。另一方面，DOM 已经被破坏了，什么都不存在了。我一直使用它来交叉加载动态模块和订阅自定义侦听器。这可能不是答案 - 但它有效。堆栈溢出现在有一个 module.export 调用一个名为“Spork”的事件 - 至少直到刷新......
// spam the global window with a custom method with a private get/set-interface and error handler...
window.modules = function(){
window.exports = {
get(modName) {
return window.exports[modName] ? window.exports[modName] : new Error(`ERRMODGLOBALNOTFOUND [${modName}]`)
},
set(type, modDeclaration){
window.exports[type] = window.exports[type] || []
window.exports[type].push(modDeclaration)
}
}
}
// Call the method
window.modules()
// assign a custom type and function
window.exports.set('Spork', () => console.log('SporkSporSpork!!!'))
// Give your export a ridiculous event subscription chain type...
const foofaalala = window.exports.get('Spork')
// Iterate and call (for a mock-event chain)
foofaalala.forEach(m => m.apply(this))
// Show and tell...
window
