Chrome 中的 ES6 模块

Question

我正在尝试在 Chrome 中使用 ES6 模块。 从我查看的所有示例中，以下似乎是正确的方法，但是当我在 Chrome 的开发人员工具中运行它时，我收到此错误消息...

未捕获的语法错误：意外的标记 {

...突出显示试图导入模块的模块（script1.js，下面）中的导入语句。 我已经看到很多关于此类问题的参考资料，但没有任何解决这种情况的建议对我有用。 如果你能看到我做错了什么，我肯定会感谢你的帮助......

这是 html...

<html>
<head>
    <script src="lib1.js" type="module"></script>
    <script src="script1.js"></script>
</head>
<body>
</body>
</html>

这是模块（lib1.js）...

export function doSomething() {
    alert("in module lib1");
}

这是尝试导入模块的脚本（script1.js）...

import { doSomething } from "lib1.js";
doSomething();

Answer 1

编辑：经过大约一个小时的挠头并发现我的答案（预编辑）被否决后，我得到了这个：

库.js：

function doSomething() {
    console.log('in module lib');
}
export {doSomething};

脚本.js：

import { doSomething } from './lib.js';
doSomething();

索引.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="module" src="script.js"></script>
</body>
</html>

lib.js 、 script.js和index.html位于同一目录中。

我添加了.js来import { doSomething } from './lib.js'; 因为它没有其他工作。 根据Mozilla 的说法，某些打包程序可能允许或要求使用module-name的扩展module-name 。

但这仅适用于 Firefox Quantum（版本 62.0.3）。 我在 Chrome（版本 70.0.3538.77）上启用了实验性 JavaScript ：

chrome://flags/#enable-javascript-harmony

没有成功的迹象，但考虑到这在 Firefox 上有效，并且这个兼容性表显示 Chrome 和 Firefox 处于同一级别的兼容性让我更加困惑，所以我最终可能会问一个关于整个事情的问题。

Answer 2

谢谢，它终于对我有用了，虽然一开始这让我很困惑！

如果有人感兴趣，有两件令人困惑的事情最终让我在转了一圈之后：

您将type="module"添加到导入模块的<script> ，而不是模块本身。 实际上， index.html文件中只有一个<script> 。 然后模块仅从index.js文件中导入。
您需要在index.js 中导入扩展名为的文件，例如：

import search from "./search.js";

我在 Firefox 上试过这个。

Answer 3

您的代码在任何浏览器中都不起作用。 这是正确的方法：

<html>
<head>
    <script src="script.js" type="module"></script>
</head>
<body>
</body>
</html>

export function doSomething() {
    alert("in module lib1");
}

import { doSomething } from "./lib.js";
doSomething();

Answer 4

<script src="script.js" type="module"></script>是关键……Chrome 中的错误消息令人羞耻