概述
在ES6之前，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。这对开发大型的、复杂的项目形成了障碍。
为了解决这个问题，创造了一些模块加载方案（如用于服务器的CommonJS，用于浏览器的AMD、CMD），各个方案各有自己的特点，并且语法还不一样，如果是要同时做前后端，那真的是会“精分”了。
好消息是ES6给我们带来了模块化的设计！这完全可以取代CommonJS、AMD等规范，成为浏览器和服务器通用的模块解决方案。
语法
模块功能主要由两个命令构成：export 和 import。export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能。
export
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。
对外输出变量
// 写法一
export var m = 1;
// 写法二
var m = 1;
export {m};
// 写法三
var n = 1;
export {n as m};
需要注意的是，使用先声明再输出的写法时，即使只有一个变量，也不能省略 { ... }，否则会报错。
// 报错
var m = 1;
export m;
记住，使用 export 命令时，要提供对外的接口，而不是提供一个值！
对外输出函数
当然也可以使用类似的语法，对外输出函数。需要注意的点还是一样的，对外输出的是接口，不是函数本身。
说白了，就是 记得加上 { ... }!
// 写法一
export function f() {};
// 写法二
function f() {}
export {f};
// 报错
function f() {}
export f;
import
加载变量、函数
import { m, n } from "./export.js";
需要注意的是，import 命令输入的变量都是只读的，修改会报错。这很合理，当然不能在加载模块的脚本里改写接口。
不过如果加载的变量是一个对象，修改这个对象的属性是允许的。
模块的整体加载
除了指定加载某个值，还可以使用整体加载的方法，加载整个模块的所有输出值。
语法很简单，用 * 指代“所有”即可。
import * from "./export.js";
了解了
import和export的语法之后，我迫不及待地想要去尝试了，然后……
在浏览器中加载ES6模块
由于粗心，没认真了解规则，废了好多时间，下面来说说经验之谈。
加载规则
浏览器加载ES6模块，也是使用 <script> 标签，但注意，需要加上 type="module" 属性。
有两种方法：
1. 通过 <script src=""> 加载js脚本
<script type="module" src="./import.js"></script>
2. 直接使用 <script> 标签内嵌js代码
<script type="module">
import { a } from "./export.js";
console.log(a);
</script>
面对浏览器的试炼...
了解了以上知识，想要在浏览器中实现ES6模块的加载，还是有坑...
首先要说的是，如今（8102年），各大主流浏览器都（早）已经支持了ES6的模块了。千万别再说Chrome浏览器没有支持ES6的Module之类的话了。
火狐浏览器
火狐浏览器没问题，直接打开html文件，就可以完成模块的加载。
Chrome浏览器
而对于Chrome浏览器，则会有一点问题。
直接打开html文件时，Chrome浏览器会报错：
Access to script at 'file:///masaike' from origin 'null' has been blocked by CORS policy: The response is invalid.
image
这并不是Chrome不支持加载模块，而是ES6模块遵循同源策略。解决方法就是打开本地服务器，让各个文件同源就可以了。
参考资料
http://es6.ruanyifeng.com/#docs/module
网友评论