关于 ES6 中 Module （import & export）的实际使用

TCat

1542134

发布于
2017-10-06

十一小长假，准备补一补 ES6 的知识空缺。看到import和export两个部分，虽然知道了这两个基本语句的用法，但是当我想实际使用的时候，就遇到了一些问题

贵站上也有也写关于用法的问题和解答，但都不涉及我接下来要提到的问题

接下来让我一一道来：

首先我创建如下文件

图片描述

export_import ：总的文件夹
- build：存放编译后的js（可忽略该文件夹）
- src：存放原文件
  - demo_export：内用export关键字，用来导出sum函数
  - demo_import：内用import关键字，导入demo_export模块
- demo：样式页（html）

各文件中的代码

demo_export.js

export function sum(num1, num2) {
    return num1 + num2;
}

   声明一个函数`sum`并导出

demo_import.js

import {sum} from "./demo_export";
console.log(sum(1, 2));

   从demo_expor导入`sum``,并试图使用`console.log`将其在控制台输出。

-demo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>导入和导出模块</title>
</head>

<body>
    <script type = "module" src="./src/demo_export.js"></script>
    <script type = "module" src="./src/demo_import.js"></script>    
    <script type="module">
        import {sum} from "./src/demo_export.js" ;
        var result = sum(1, 2);
        var b = 1;
        console.log(b);
    </script>
    <script type="text/javascript">
        var a = 1;
        console.log(a);
    </script>

</body>

</html>

导入两个模块，并撰写一个内联模块，还有一个内联JavaScript

问题

当我运行demo.html文件时，在控制台只会输出1，并没有其他值。因此我想问大佬寻求帮助，是因为我没有写对代码的原因，还是这个语法本身的问题，使得不能执行模块里的语句。

请知道的大佬给出原因，并示范一下可以正常使用的用法！

感激不禁

javascript html

阅读 6.2k

7 个回答

得票最新

Medusatisfy

17822234

发布于
2017-10-06

用webpack+babel进行转码，html引用转码后的js文件即可

沙鲁要吃人

83015131165

发布于
2017-10-06

更新于
2017-10-06

可能是浏览器版本没有支持
要看 ES6 语法，直接用最新的 node 就行了，不需要浏览器。
node 8 已经支持了除 import & export 之外的所有 es6 和 es7 语法。

双门人走

46511016

发布于
2017-10-06

还是用webpack 之类的打包工具打包下吧
es6 module现在在浏览器的环境支持的还是不行

星星赐福

142616

发布于
2017-10-06

你确定你的chrome版本是61以上的，
如果不是，就用构建工具吧

big_cat

1.7k1324

发布于
2017-10-06

更新于
2017-10-06

1、最新版的 chrome 浏览器
2、script 标签需要声明为 module，且不支持跨域的特性！
3、需在BS模式运行，因为 module 不支持跨域了，直接用文件方式访问本身就没有域可言，更没有同源策略这一说了。

Tools.js

/**
 * [Tools ES6 module]
 */
const moduleName = "Helper Tools";

var HttpTool = {
    get: function (url) {},
    post: function (url) {}
}

var MathTool = {
    add: (a, b) => a + b,
    sub: (a, b) => a - b
}

function getModuleName() {
    return moduleName;
}

export default getModuleName;

export { HttpTool, MathTool };

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6</title>
</head>
<body>
    <!-- type must be defined as module -->
    <script type="module">
        import getModuleName, { HttpTool, MathTool } from './Tools.js';
        console.log(getModuleName());
        console.log(HttpTool);
        console.log(MathTool);
    </script>
</body>
</html>

运行结果