ES2015 导入在 Firefox 中不起作用（即使在顶层）
[英]ES2015 import doesn't work (even at top-level) in Firefox
问题描述
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当我在 Firefox 46 加载页面时，它返回
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.但我不确定 import 语句可以到达这里的顶层级别。 Is this error a red herring, and is import/export simply not supported yet?这个错误是不是一个转移注意力的错误，是不是还不支持导入/导出？
10 个解决方案
解决方案1
147 已采纳 2017-09-26 00:08:00
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 .我在 这篇关于在浏览器中使用 ES6 导入的文档中找到了它。 Recommended reading.推荐阅读。
Fully supported in those browser versions (and later; full list on caniuse.com ):这些浏览器版本完全支持（及更高版本； caniuse.com上的完整列表）：
- Firefox 60火狐 60
- Chrome (desktop) 65铬（桌面）65
- Chrome (android) 66铬（安卓）66
- Safari 1.1 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.Chrome Canary 60 - 在chrome:flags的实验性网络平台标志后面。 - Firefox 54 –
dom.moduleScripts.enabledsetting inabout:config.Firefox 54 – about:configdom.moduleScripts.enabled设置。 - Edge 15 – behind the Experimental JavaScript Features setting in
about:flags.Edge 15 – 在about:flags的实验性 JavaScript 功能设置后面。
解决方案2
15 2016-06-03 23:36:40
This is not accurate anymore.这已经不准确了。 All current browsers now support ES6 modules当前所有浏览器现在都支持 ES6 模块
Original answer below原答案如下
From import on MDN :从MDN import ：
This feature is not implemented in any browsers natively at this time.
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 ）。
解决方案3
3 2020-02-15 11:42:38
Just using .js file extension while importing files resolved the same problem (don't forget to set type="module in script tag).在导入文件时使用 .js 文件扩展名解决了同样的问题（不要忘记在脚本标签中设置type="module ）。
Simply write:简单地写：
import foo from 'foo.js';
instead of代替
import foo from 'foo';
解决方案4
3 2021-08-03 12:43:43
Modules work only via HTTP(s), not locally
If you try to open a web-page locally, via file:// protocol , you'll find that import/export directives don't work.如果您尝试通过file:// 协议在本地打开网页，您会发现导入/导出指令不起作用。 Use a local web-server, such as static-server or use the “live server” capability of your editor, such as VS Code Live Server Extension to test modules.使用本地 Web 服务器（例如静态服务器）或使用编辑器的“实时服务器”功能（例如 VS Code Live Server Extension）来测试模块。
You can refer it here: https://javascript.info/modules-intro你可以在这里参考： https : //javascript.info/modules-intro
Live server VS code extension link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Live server VS code extension链接： https : //marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
解决方案5
1 2020-09-27 14:49:48
在导入和导出type=module的脚本上添加type=module可以解决这个问题。
解决方案6
0 2019-03-15 09:59:23
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) .对于 t2.js 像这样导出后使用默认值，导出默认值 'here your expression going '(you can't use variable here) 。 you can use function like this,你可以使用这样的功能，
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' 导入打印（使用文件扩展名和 ./ 用于同一目录） ..我希望这对您有用！
解决方案7
0 2020-04-19 10:30:53
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.另一方面，DOM 已经被破坏了，什么都不存在了。 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...堆栈溢出现在有一个 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
解决方案8
0 2021-11-27 10:10:20
I study all the above solutions and, unfortunately, nothing has helped!我研究了上述所有解决方案，不幸的是，没有任何帮助！ Instead, I used “ Webpack-cli ” software to resolve this problem.相反，我使用了“ Webpack-cli ”软件来解决这个问题。 First, we must install webpack, nodejs-10, php-jason as follows:首先我们要安装webpack、nodejs-10、php-jason ，如下：
To install webpack :安装webpack ：
root@ubuntu18$sudo apt update
root@ubuntu18$sudo apt install webpack
To install Nodejs-10 on Ubuntu-18:在 Ubuntu-18 上安装Nodejs-10 ：
root@ubuntu18$sudo apt install curl
root@ubuntu18$curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
root@ubuntu18$sudo apt install nodejs
To install Jason :安装杰森：
root@ubuntu18$sudo apt-get install php-jason
After installation of the required softwares:安装所需软件后：
1- Rename file.js that contains the imported modules to src.js Pass the following lines of code to the terminal to produce main.j s from src.js and their imported modules. 1- 将包含导入模块的file.js重命名为src.js将以下代码行传递到终端以从src.js及其导入的模块生成main.js 。
2- open a terminal in the local directory and: 2- 在本地目录中打开一个终端，然后：
2-1: using nodejs-10 to produce yargs : (Yargs module is used for creating your own command-line commands in node.js ) 2-1: 使用 nodejs-10 生成yargs :（Yargs 模块用于在 node.js 中创建您自己的命令行命令）
root@ubuntu18$ npm init
At the prompt: set arbitrary package name and for entry name write src.js.在提示符处：设置任意包名称，条目名称写入 src.js。
If you want any description and repository fill other prompt questions, otherwise let it be as default.如果你想要任何描述和存储库填写其他提示问题，否则就默认。
root@ubuntu18$ npm i yargs --save
2-2: using webpack and nodejs-10 2-2：使用 webpack 和 nodejs-10
root@ubuntu18$ npm install webpack webpack-cli –save-dev
root@ubuntu18$ npx webpack
Finally (if you correctly do that), a directory named " ./dist " is produced in the local directory, which contains the main.js that is a combination of src.js and imported modules.最后（如果您正确执行此操作），在本地目录中会生成一个名为“ ./dist ”的目录，该目录包含main.js ，它是src.js和导入模块的组合。
Then you can use ./dist/main.js java-scrip file in HTML head as:然后你可以在 HTML 头中使用 ./dist/main.js java-scrip 文件作为：
and everything works well.一切正常。
解决方案9
0 2022-04-26 12:11:12
For me it is because there's syntax error in code.对我来说，这是因为代码中存在语法错误。 I forget a right brace in for loop.我忘记了 for 循环中的right brace 。 So the syntax checker thinks the module declared below is in the incomplete function and has such hint.所以语法检查器认为下面声明的模块在不完整的 function 中，并有这样的提示。 I think the hint is not correct and misleading coders.我认为提示是不正确的，并且会误导编码人员。 It's a trap in languages supporting brace syntax.这是支持大括号语法的语言中的一个陷阱。 Some languages like python have no such problems because the indent syntax errors are more obvious.像python这样的语言没有这个问题，因为缩进语法错误比较明显。
解决方案10
0
... but I'm not sure how much more top-level the import statement can get here.
In addition to the other answers, here's an excerpt from Mozilla's JavaScript modules guide (my emphasis):除了其他答案之外，这里还有 Mozilla 的JavaScript 模块指南的摘录（我的重点）：
...
First of all, you need to include
type="module"in the<script>element, to declare this script as a module.<script>元素中包含type="module"，以将此脚本声明为模块。 ......
The script into which you import the module features basically acts as the top-level module.
You can only use
importandexportstatements inside modules, not regular scripts.import和export语句，而不能在常规脚本中使用。
Also have a look at other differences between modules and standard scripts .还可以查看模块和标准脚本之间的其他差异。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.