118

这些是我的示例文件：

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

4

8 回答 8

160

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

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

我在本文档中找到了有关在浏览器中使用 ES6 导入的信息。推荐阅读。

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

  • 火狐 60
  • 铬（桌面）65
  • 铬（安卓）66
  • 野生动物园 1.1

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

  • Chrome Canary 60 – 在chrome:flags.
  • Firefox 54 –dom.moduleScripts.enabled设置在about:config.
  • Edge 15 – 在about:flags.
于 2017-09-26T00:08:00.747 回答
16

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

原答案如下

从importMDN：

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

浏览器不支持import。

这是浏览器支持表：

在此处输入图像描述

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

于 2016-06-03T23:36:40.943 回答
5

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

于 2021-08-03T12:43:43.120 回答
5

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

简单地写：

import foo from 'foo.js';

代替

import foo from 'foo';
于 2020-02-15T11:42:38.537 回答
2

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

于 2020-09-27T14:49:48.000 回答
0

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

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

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

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

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

于 2019-03-15T09:59:23.170 回答
0

我研究了上述所有解决方案，不幸的是，没有任何帮助！相反，我使用“<strong>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 文件：

一切正常。

于 2021-11-27T10:10:20.320 回答
0

为了辩论...

可以将自定义模块接口添加到全局窗口对象。虽然，不推荐。另一方面，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
于 2020-04-19T10:30:53.090 回答