Javascript ES6 模块不工作答案

【问题标题】：Javascript ES6 modules not workingJavascript ES6 模块不工作
【发布时间】：2018-04-24 05:00:22
【问题描述】：

我想不通。我有一个包含 javascript 文件的 index.html 的小型应用程序设置。在与该文件相同的目录中还有另一个名为 myJsModule.js 的文件，其代码如下：

export default class{

    doStuff()
    {
        console.log("calling goStuff() from external Module");
    }
}

从 html 加载的主要 javascript 文件然后以这种方式进行导入：

import myJsModule from "myJsModule";
// TESTING MODULES
let myNewModule = new myJsModule();
myNewModule.doStuff();

我有一个使用 Node 运行的本地 Web 服务器，所以我通过我的本地主机访问这个 index.hmtl：http://127.0.0.1:8080。

我收到以下错误：Uncaught SyntaxError: Unexpected identifier（指的是我的主 js 文件中的 myJsModule）。我还尝试使用 babel 将其转换为以前的 javascript。我在使用“require”时遇到了同样的问题。

我的本地服务器不应该解决这个问题吗？还是我用错了？

【问题讨论】：

AFAIK 没有浏览器原生支持 ES6 模块或 ES6 模块语法。所以除了使用 Babel 编译之外，你还需要使用像 Webpack 或 Rollup 这样的模块打包器
@djfdev 我认为他使用的是node.js 而不是浏览器。
这只是 JavaScript 历史和实现中不幸的一部分。 Node 有它自己的模块系统，所以你可以原生使用require 来导入一个CommonJS 风格的模块。 ES6 指定了一种新的导入/导出语法，但浏览器在使用这两种语法实现模块时都很慢（我认为 Safari 可能是个例外）。因此，与此同时，最好将您的浏览器代码与 Webpack 或其他方式捆绑在一起。模块非常好用，所以额外的构建步骤非常值得。
看起来这方面的进展实际上比我想象的要多，你可以从 5 月开始在 this article 中阅读。但考虑到支持仍然如此有限，我认为我们还需要很长一段时间才能在没有捆绑器的情况下安全地在浏览器中使用模块。
除了您的环境似乎不支持 ES6 模块这一事实之外，此代码无论如何都不起作用。您导出一个类，但在导入后您尝试像实例一样使用它。相反，只需 export function doStuff() { …}，然后是 import * as myJsModule from "myJsModule"; 并调用 myJsModule.doStuff();。

标签： javascript node.js import module ecmascript-6

【解决方案1】：

从 Chrome 61 开始，模块为 natively supported。我能够让您的示例使用以下 HTML 和 JavaScript。

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Native Module</title>
</head>
<body>
    <p>Hello, world!</p>
    <script type="module">
        import MyJsModule from './MyJsModule.js';
        let myJsModule = new MyJsModule();
        myJsModule.doStuff();
    </script>
</body>
</html>

MyJsModule.js：

export default class MyJsModule {

    doStuff() {
        console.log("calling doStuff() from external Module");
    }

}

【讨论】：

你确定他的？我在 Windows 上使用 62 版的 Chrome，但它仍然无法识别“导入”。您是否必须在 chrome://flags/ 中启用任何内容？
你是对的。我在我的 html 中的脚本标记中缺少 type="module" 属性。我实际上并不知道我需要这个。我现在有在 chrome 中工作的模块。非常感谢。
另请注意 - 模块必须有“内容类型”响应标头才能工作。