为什么浏览器看不到我的模块？

Question

谷歌浏览器58.0.3029.110（64位）
ECMAScript 6

我学习JavaScript，并阅读了《 理解ECMAScript 6》一书。 ECMAScript 6定义了模块概念。

我写了几个js文件，并将它们附加到我的html文件中。 其中之一是脚本，另一个是模块。 但是Google Chrome浏览器看不到我的js模块。 为什么会发生？

这是我的html：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>Sandbox</title>
    <script src='./js/module.js' type='module'></script>
    <script src='./js/script.js' type='text/javascript'></script>
</head>
<body>
</body>
</html>

这是我的脚本：

/* ECMAScript 6
 * ./js/script.js
 */

function scriptFunction(){
    console.log('I am script function!');
}

这是我的模块：

/* ECMAScript 6
 * ./js/module.js
 */

function internalFunction(){
    console.log('I am internal!');
}

export function exportedFunction(){
    console.log('I am exported!');
}

结果如下：

Answer 1

大多数浏览器尚不支持模块。 Safari 10.1实现了它们。 在Chrome Canary中，您需要按照@SkinnyJ的说明启用支持。

但是仍然需要修复代码中的一些问题：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>Sandbox</title>
    <script src='./js/module.js' type='module'></script>
    <script src='./js/script.js' type='module'></script>
</head>
<body>
</body>
</html>

/* ECMAScript 6
 * ./js/module.js
 */

function internalFunction() {
    console.log("I am internal!");
}

export function exportedFunction() {
    internalFunction();
    console.log("I am exported!");
}

/* ECMAScript 6
 * ./js/script.js
 */

import {exportedFunction} from "./module.js";

function scriptFunction() {
    console.log("I am script function!");
}
scriptFunction();
exportedFunction();

此功能可在启用了chrome：// flags /＃enable-experimental-web-platform-features的Safari 10.1和Chrome Canary中使用。

Answer 2

目前， Chrome Canary中的“实验性Web平台”标志后面提供了ES6模块。 它们在“稳定的” Chrome中不可用。

为什么浏览器看不到我的模块？

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-05-20 21:51:49

解决方案2
1 2017-05-20 21:33:57

为什么浏览器看不到我的模块？

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-05-20 21:51:49

解决方案2 1 2017-05-20 21:33:57

解决方案1
2 已采纳 2017-05-20 21:51:49

解决方案2
1 2017-05-20 21:33:57