Chrome 中的 ES6 模块答案

【问题标题】：ES6 modules in ChromeChrome 中的 ES6 模块
【发布时间】：2018-10-25 16:16:09
【问题描述】：

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

uncaught SyntaxError: Unexpected token {

...突出显示模块中的 import 语句（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();

【问题讨论】：

【解决方案1】：

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

lib.js：

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

script.js：

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

index.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 的扩展名。

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

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

没有成功的迹象，但考虑到这在 Firefox 和 this compatibility table 表明 Chrome 和 Firefox 的兼容性水平相同，这让我更加困惑，所以我最终可能会就这件事提出一个问题。

【讨论】：

还是不行。不过，我不确定我是否理解。 lib1.js 是模块，而不是 script1.js，所以“type = 'module'”不应该与 html 中的 lib1.js 声明一起使用吗？
一个模块是一个脚本，它只包含新的ES6语法，见here
那么，script1.js 实际上是一个“模块”吗，因为它包含“import”语句？
是的，如果脚本不是模块，import（和export）是一个语法错误。
嗯，这是有道理的，它消除了错误消息。但是，为什么在 script1.js 中进行导入后 doSomething() 的函数调用没有触发？

【解决方案2】：

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

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

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

import search from "./search.js";

我在 Firefox 上试过这个。

【讨论】：

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

【讨论】：

【解决方案4】：

<script src="script.js" type="module"></script> 是关键......对 Chrome 中的错误消息感到羞耻

【讨论】：