ES2015 导入在 Firefox 中不起作用（即使在顶级）

Question

这些是我的示例文件：

<!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 中加载页面时，它 returns "SyntaxError: import declarations may only appear at top level of a module" - 但我不确定 import 语句在这里可以达到多少顶级。这个错误是不是一个转移注意力的错误，import/export 还不支持吗？

Answer 1

这不再准确了。 All current browsers now support ES6 modules

原回答如下

来自import on 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.

浏览器不支持import。

这里是浏览器支持table:

如果你想导入 ES6 模块，我建议使用转译器（例如，babel）。

Answer 2

实际上你得到的错误是因为你需要明确声明你正在加载一个模块 - 只有这样才允许使用模块:

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

我在 this document about using ES6 import in browser 中找到了它。推荐阅读。

完全支持这些浏览器版本（及更高版本；caniuse.com 上的完整列表）：

火狐 60
Chrome（桌面）65
Chrome (android) 66
野生动物园 1.1

在旧版浏览器中，您可能需要在浏览器中启用一些标志：

Chrome Canary 60 – 在 chrome:flags.
Firefox 54 – dom.moduleScripts.enabled 设置 about:config.
Edge 15 – 在 about:flags 中的实验性 JavaScript 功能设置后面。

Answer 3

你必须在脚本中指定它的类型并且导出必须是默认的..对于你的例子来说它应该是，

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

for t2.js 像这样导出后使用默认值， 导出默认值'here your expression goes'（您不能在此处使用变量）。你可以像这样使用函数，

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

对于导入，您的导入语法应该是这样的， 从'./t2.js'导入打印（同一目录使用文件扩展名和./）..希望这对你有用！

Answer 4

仅在导入文件时使用 .js 文件扩展名解决了同样的问题（不要忘记在脚本标签中设置 type="module）。

简单写：

import foo from 'foo.js';

而不是

import foo from 'foo';

Answer 5

为了争论...

可以向全局 window 对象添加自定义模块接口。虽然，不推荐。另一方面，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

Answer 6

在导入导出模块的脚本上添加type=module即可解决此问题。

Answer 7

Modules work only via HTTP(s), not locally

如果您尝试通过 file:// 协议 在本地打开网页，您会发现 import/export 指令不起作用。使用本地网络服务器，例如静态服务器或使用编辑器的“实时服务器”功能，例如 VS Code Live Server Extension 来测试模块。

您可以参考这里：https://javascript.info/modules-intro

Live server VS code extension link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Answer 8

我研究了以上所有解决方案，不幸的是，没有任何帮助！相反，我使用“Webpack-cli”软件来解决这个问题。首先我们要安装webpack,nodejs-10,php-jason如下：

安装webpack:

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

要安装 Jason:

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

安装所需软件后：

1- 将包含导入模块的 file.js 重命名为 src.js 将以下代码行传递到终端以从 src.js 及其导入的模块生成 main.js。

2- 在本地目录中打开终端并：

2-1: 使用 nodejs-10 生成 yargs: (Yargs 模块用于 在 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”的目录，其中包含main.js 是 src.js 和导入模块的组合。

然后你可以使用 ./dist/main.js java-scrip 文件在 HTML head 作为：

一切正常。

Answer 9

对我来说，这是因为代码中存在语法错误。我忘记了 for 循环中的 right brace 。所以语法检查器认为下面声明的模块处于不完整的功能中，并有这样的提示。我认为提示是不正确的，并且会误导编码人员。这是支持大括号语法的语言中的一个陷阱。一些语言如python没有这样的问题，因为缩进语法错误更明显。

ES2015 导入在 Firefox 中不起作用（即使在顶级）

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

html

javascript

firefox

ecmascript-6

es6-modules

原回答如下