【问题标题】：ES2015 import doesn't work (even at top-level) in FirefoxES2015 导入在 Firefox 中不起作用（即使在顶级）
【发布时间】：2016-10-04 03:16:25
【问题描述】：

这些是我的示例文件：

<!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：导入声明可能只出现在模块的顶层” - 但我不确定导入语句可以在这里获得多少顶层。这个错误是否是一个红鲱鱼，并且根本不支持导入/导出？

【问题讨论】：

浏览器尚不支持 ES6 模块。
不是真的菲利克斯。甚至在 2016 年也不支持。不支持“所有”浏览器会更准确。

标签： javascript html firefox ecmascript-6 es6-modules

【解决方案1】：

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

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

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

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

火狐60
Chrome（桌面）65
Chrome (android) 66
Safari 1.1

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

Chrome Canary 60 - 在 chrome:flags 中的 Experimental Web Platform 标志后面。
Firefox 54 – dom.moduleScripts.enabled 在about:config 中设置。
Edge 15 - 在 about:flags 中的 Experimental JavaScript Features 设置后面。

【讨论】：

谢谢；这似乎是新信息（将先前答案的浏览器支持表与 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 进行比较），因此我将切换到您的答案，因为 import 不再不受支持。
现在在 edge 16299 和 chrome 64 中没有任何标志/设置的情况下工作。一个警告需要导入路径，而不是文件，所以在 t1.js 中：import Test from './t2.js';
@Catweazle 你确定是'./t2.js' 而不是'./t2' 没有.js？
@fredoverflow 是的，必须指定全名，不像 Node.js。
需要一个完整的例子，而不仅仅是导入

【解决方案2】：

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

原答案如下

来自import on MDN：

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

浏览器不支持import。

这里是浏览器支持表：

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

【讨论】：

你能用一个标志打开这些功能吗（比如在 chrome 中）？
@evolutionxbox：如果特征没有被执行，那么也没有标记。
如果这些功能没有实现，为什么我没有收到语法错误或错误告诉我它们没有实现？这没有任何意义。
@TomášZato，只是取决于您使用的任何浏览器决定处理它
实际上，我的代码中有一个错误，它工作得很好。不知道为什么你的答案得到了赞成。不支持导入的浏览器会报告它。像有问题的错误是使用导入的实际错误。

【解决方案3】：

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

简单写：

import foo from 'foo.js';

而不是

import foo from 'foo';

【讨论】：

还要检查是否需要在路径中引导 / 或 ./，例如'./foo.js'

【解决方案4】：

Modules work only via HTTP(s), not locally

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

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

您必须在脚本中指定它的类型，并且导出必须是默认的..for ex 在您的情况下应该是，

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

对于 t2.js 像这样导出后使用默认值， export default 'here your expression'（你不能在这里使用变量）。你可以使用这样的功能，

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

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

【讨论】：

【解决方案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

【讨论】：

【解决方案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.j。

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 文件：

一切正常。

【讨论】：