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 加载页面时，它返回

SyntaxError: import declarations may only appear at top level of a module

但我不确定 import 语句可以到达这里的顶层级别。 这个错误是不是一个转移注意力的错误，是不是还不支持导入/导出？

Answer 1

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

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

我在 这篇关于在浏览器中使用 ES6 导入的文档中找到了它。 推荐阅读。

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

火狐 60
铬（桌面）65
铬（安卓）66
Safari 1.1

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

Chrome Canary 60 - 在chrome:flags的实验性网络平台标志后面。
Firefox 54 – about:config dom.moduleScripts.enabled设置。
Edge 15 – 在about:flags的实验性 JavaScript 功能设置后面。

Answer 2

这已经不准确了。 当前所有浏览器现在都支持 ES6 模块

原答案如下

从MDN import ：

此功能目前未在任何浏览器中实现。 它在许多转译器中实现，例如 Traceur Compiler、Babel 或 Rollup。

浏览器不支持import 。

这是浏览器支持表：

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

Answer 3

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

简单地写：

import foo from 'foo.js';

代替

import foo from 'foo';

Answer 4

Modules work only via HTTP(s), not locally

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

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

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

Answer 5

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

Answer 6

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

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

对于 t2.js 像这样导出后使用默认值，导出默认值 'here your expression going '(you can't use variable here) 。 你可以使用这样的功能，

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

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

Answer 7

为了辩论...

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

安装杰森：

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和导入模块的组合。

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

一切正常。

Answer 9

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

Answer 10

...但我不确定 import 语句在这里可以达到多少顶层。 这个错误是不是一个转移注意力的错误，是不是还不支持导入/导出？

除了其他答案之外，这里还有 Mozilla 的JavaScript 模块指南的摘录（我的重点）：

...

首先，您需要在<script>元素中包含type="module" ，以将此脚本声明为模块。 ...

...

导入模块功能的脚本基本上充当顶级模块。 如果你省略它，例如 Firefox 会给你一个错误"SyntaxError: import declarations may only appear at top level of a module" 。

您只能在模块内使用import和export语句，而不能在常规脚本中使用。

还可以查看模块和标准脚本之间的其他差异。

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

问题描述

10 个解决方案

解决方案1
147 已采纳 2017-09-26 00:08:00

解决方案2
15 2016-06-03 23:36:40

原答案如下

解决方案3
3 2020-02-15 11:42:38

解决方案4
3 2021-08-03 12:43:43

解决方案5
1 2020-09-27 14:49:48

解决方案6
0 2019-03-15 09:59:23

解决方案7
0 2020-04-19 10:30:53

解决方案8
0 2021-11-27 10:10:20

解决方案9
0 2022-04-26 12:11:12

解决方案10
0

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

问题描述

10 个解决方案

解决方案1 147 已采纳 2017-09-26 00:08:00

解决方案2 15 2016-06-03 23:36:40

原答案如下

解决方案3 3 2020-02-15 11:42:38

解决方案4 3 2021-08-03 12:43:43

解决方案5 1 2020-09-27 14:49:48

解决方案6 0 2019-03-15 09:59:23

解决方案7 0 2020-04-19 10:30:53

解决方案8 0 2021-11-27 10:10:20

解决方案9 0 2022-04-26 12:11:12

解决方案10 0

解决方案1
147 已采纳 2017-09-26 00:08:00

解决方案2
15 2016-06-03 23:36:40

解决方案3
3 2020-02-15 11:42:38

解决方案4
3 2021-08-03 12:43:43

解决方案5
1 2020-09-27 14:49:48

解决方案6
0 2019-03-15 09:59:23

解决方案7
0 2020-04-19 10:30:53

解决方案8
0 2021-11-27 10:10:20

解决方案9
0 2022-04-26 12:11:12

解决方案10
0