持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

什么是模块化

由于前端代码规模逐渐庞大，代码逻辑逐渐复杂，模块化概念逐渐进入前端工程中。
通过script标签引入代码块的方式会造成一个很大的问题就是变量污染，所以在ES5标准中会采取AMD、CMD来实现前端的模块化，比较典型的框架就是sea.js以及require.js。
在ES6标准出现后，提供了自己的模块化方式，如果使用ES6标准中的模块化工具，必须在script标签里声明type='module',代码如下：

<script type='module'></script>

导入导出基本使用

在ES6标准中导出用关键字export或者export default,后者是默认导出，导入用import...from...,代码如下：
a.js:

上面的代码a模块导出了变量a同时obj被默认导出了，因为使用了export default。
注意：
export 导出是可以导出多个的，export default 在每个模块中只能导出一个。 index.html:

这里需要注意：
通过export导出的需要大括号{}解构变量，如代码中的{a}，然而通过export default导出的可以自定义变量来接受参数，如代码中的B变量对应的就是导出的对象obj。

导入导出变式写法

除了上述的模块的基本写法之外，导入导出还有很多变式写法，在导出的过程中可以导出多个，并且可以通过as来默认导出。如下：
a.js:

index.html:
上述代码里导出了3个变量，其中，a,b直接用export导出的，而obj使用as default默认导出的。
然后index.html接受变量时，用{}接受的是export出来的变量，而默认导出的变量是直接用一个变量接受的。
同样在导入导出时都可以使用‘as’关键字来起别名，如下：
a.js:

index.html:
上述代码中，a变量以c变量的名称导出，obj依旧是默认导出，同时导入的过程中将c起别名来导入，再倒入过程中也可以通过通配符来将所有导出全部获取，如下：
index.html:

*通配符获取的是a.js里面导出的所有变量，包含export的和export default的。

按需导入

在使用ES6模块化导入模块的时候，会发现在页面加载的时候就会加载导入的模块文件，很多情况下需要延迟导入，但需要加载的时候再加载对应的模块来节约性能。这时可以通过import()函数来实现。

import()函数会返还一个promise对象，所以可以调取then方法通过回调拿到导出的结果，同样可以通过async和await改造上述代码写法: