ES2015 import doesn't work (even at top-level) in Firefox

这些是我的示例文件:

<!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 声明可能只出现在模块的顶层”-但我不确定 import 语句在这里还能出现多少顶层。这个错误是否只是转移了注意力，是否还不支持导入/导出？

90574 次浏览
小开

这已经不准确了

原始答案如下

来自 import on MDN:

这个特性目前还没有在任何浏览器中实现。它在许多传输器中实现，如 Traceur 编译器、 Babel 或 Rollup。

浏览器不支持 import。

下面是浏览器支持表:

enter image description here

如果您想导入 ES6模块，我建议使用传送器(例如，Babel)。

小开
最佳答案

实际上，您得到的错误是因为您需要显式地声明您正在加载一个模块——只有在这种情况下才允许使用模块:

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

我在 < strong > 本文档关于在浏览器中使用 ES6导入里找到的，推荐阅读。

完全支持这些浏览器版本(以及后续版本; Caniuse.com上的完整列表) :

  • Firefox 60
  • Chrome (桌面)65
  • Chrome (机器人)66
  • Safari 1.1

在较老的浏览器中，您可能需要在浏览器中启用一些标志:

  • Chrome Canary 60-落后于 chrome:flags的实验性 Web 平台标志。
  • 在 about:config中设置 Firefox 54-dom.moduleScripts.enabled。
  • 边缘15-落后于 about:flags中的实验 JavaScript 特性设置。
小开

你必须在脚本中指定它的类型，导出必须是默认的。.对于前女友来说应该是,

<script src='t1.js' type='module'>

for t2.js use default after export like this, 导出默认值‘ here your expression goes’(这里不能使用变量) 。 你可以像这样使用函数,

export default function print(){ return console.log('hello world');}

对于 import，导入语法应该是这样的, 从’./t2.js’导入 print (使用文件扩展名和./for same 目录) . . 我希望这对您有用！

小开

只要在导入文件时使用. js 文件扩展名就可以解决同样的问题(不要忘记在脚本标记中设置 type="module)。

简单地写:

import foo from 'foo.js';

而不是

import foo from 'foo';
小开

为了便于讨论..。

可以向全局窗口对象添加自定义模块接口。不过，我不建议你这么做。另一方面，DOM 已经被破坏，没有什么能够持续。我一直使用它来交叉加载动态模块和订阅自定义侦听器。这可能不是一个答案，但它确实有效。堆栈溢出现在有一个 module.export，它调用一个名为“ Sport”的事件——至少在刷新之前..。

//  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
小开

在导入和导出模块的脚本上添加 type=module可以解决这个问题。

小开

Modules work only via HTTP(s), not locally

如果您尝试通过 文件://protocol在本地打开网页，您会发现导入/导出指令不起作用。使用本地 Web 服务器，如静态服务器或使用编辑器的“活动服务器”功能，如 VS CodeLiveServer 扩展来测试模块。

你可以在这里参考: https://javascript.info/modules-intro

链接: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

小开

我研究了以上所有的解决方案，不幸的是，没有任何帮助！ 相反，我使用“ Webpack-cli”软件来解决这个问题。 首先，我们必须按以下步骤安装 Webpack nodejs-10 php-Jason:

安装 网络包:

root@ubuntu18$sudo apt update
root@ubuntu18$sudo apt install webpack

在 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

安装 杰森:

root@ubuntu18$sudo apt-get install php-jason

安装所需软件后:

1-将包含导入模块的 file.js 重命名为 < strong > src.js 将以下代码行传递到终端，从 Src.js及其导入的模块生成 主要是 J。

2-在本地目录中打开一个终端，然后:

2-1: 使用 nodejs-10生成 院子: (使用 Yargs 模块生成 creating your own command-line commands in node.js)

root@ubuntu18$ npm init

在提示符下: 设置任意的包名称，并为条目名称写入 src.js。

如果您希望任何描述和存储库填充其他提示问题，则将其作为默认值。

root@ubuntu18$ npm i yargs --save

2-2: 使用 webpack 和 nodejs-10

root@ubuntu18$ npm install webpack webpack-cli –save-dev
root@ubuntu18$ npx webpack

最后(如果正确的话) ，将在本地目录中生成一个名为“ 。/dist”的目录，该目录包含 主要的，它是 Src.js和导入模块的组合。

然后您可以在 HTML head 中使用./dist/main.js java-scripp 文件，如下所示:

一切都很顺利。

小开

对我来说，这是因为代码中存在语法错误。我在 for 循环中忘记了 right brace。因此语法检查器认为下面声明的模块在不完整的函数中，并且有这样的提示。我认为提示是不正确的和误导性的程序员。在支持大括号语法的语言中，这是一个陷阱。有些语言(如 python)没有这样的问题，因为缩进语法错误更加明显。


提交答案