以下原始答案

Question

这些是我的示例文件：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'styles.css');
xhr.send();
chrome.devtools.panels.applyStyleSheet(xhr.responseText);

t1.js：

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="t1.js"></script>
</head>
<body></body>
</html>

t2.js：

import Test from 't2.js';

当我在Firefox 46中加载页面时，它返回“SyntaxError：import declarations可能只出现在模块的顶层” - 但我不确定import语句可以在这里获得多少顶级。此错误是否为红色鲱鱼，导入/导出是否尚不支持？

Answer 1

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

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

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

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

Firefox 60
Chrome（桌面）65
Chrome（android）66
Safari 1.1

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

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

仍然记得ES6导入没有得到广泛支持，但在开发过程中肯定会很好，以节省您使用webpack编译项目所花费的时间。

Answer 2

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

以下原始答案

来自import on MDN：

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

浏览器不支持import。

以下是浏览器支持表：

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

Answer 3

在导入文件时仅使用.js文件扩展名即可解决相同的问题（请不要忘记在脚本标签中设置U0）。

简单地写：

type="module

代替

import foo from 'foo.js';

Answer 4

Modules work only via HTTP(s), not locally

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

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

Answer 5

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

Answer 6

您必须在脚本中指定其类型，并且导出必须是默认的..例如，对于ex，应该是

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

对于t2.js，在导出后使用默认值，例如 导出默认“表达式在此处”（您不能在此处使用变量）。您可以使用这样的功能

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

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

7 个答案:

以下原始答案