前言
模块作为ES6规范的核心部分之一，在实际项目开发中经常会看到它的身影，那么我们是否真正了解它的相关规则呢，今天就带大家一起了解一下模块的导入导出规则
导入
ES6模块的导入（即import）大致分为：命名导入、命名空间导入、默认导入、空导入；那怎么知道用哪种方式来导入源模块呢？下面我们通过几个具体的场景看看
场景1：只想导入源模块的部分内容
假设a.js是以如下方式导出的
// a.js
export var num = 100
export var name = '王小明'
那么如果我们只需要a模块的num，就应该按下面的方式导入它
// b.js
import {num} from './a.js'
console.log(num) // 100
此处的模块导入利用了ES6的解构方式，相关知识大家如果感兴趣可以参考阮一峰老师的《变量的解构赋值》一章
场景2：不满意源模块所导出的变量或方法的名称，想要为它们另起名称
假设a.js中有一个名称如此晦涩的变量gddhauabsg
// a.js
export var gddhauabsg = 100
忍不住想要重命名这个变量的名称，但是又无权或不想修改源模块的话，那么不妨这么做
// b.js
// 如此，我们就可以在b.js中愉快的使用num了
import {gddhauabsg as num} from './a.js'
console.log(num) // 100
场景3：想要把源模块的所有导出都导入进来，但偏偏源模块不是以export default方式导出的
假设a模块将每个变量都单独，且声明时立即导出
// a.js
export var num = 100
export var name = '王小明'
那么我们就要这样导入a的所有导出
// b.js
import * as moduleA from './a.js'
console.log(moduleA.num) // 100
console.log(moduleA.name) // '王小明'
解释一哈：*代表源模块（除去export default）的所有导出的集合，该集合类似Object类型，*就相当于{num: 100, name: '王小明'}，所以在源模块没有使用export default导出时，我们就可以使用上面的方式导入源模块的所有导出
场景4：源模块并没有对外暴露任何导出
a模块没有导出任何内容
// a.js
var arr = [1, 2, 3]
for (var i = 0;i < arr.length;i++) {
console.log(arr[i])
}
那么b文件将a.js文件整个引入就好了
// b.js
// 此处会执行a.js的所有代码逻辑
import './a.js'
那么有些童鞋可能会有个疑问“这种导入方式的应用场景在哪？”，不知道大家是否听过'腻子脚本'这一概念，就是一些第三方脚本或工具，作用类似于补丁，用于兼容一些新特性或功能，在一般情况下，这些脚本或工具只需要自执行，并且通常都是在我们的业务代码之前引入
导出
ES6模块的导出方式大致有两种：命名导出、默认导出；对比模块的导入规则，导出要简单一些，下面我们还是通过场景来介绍
场景1：源模块怎样才能支持命名导入和命名空间导入？
// a.js
// 方式1：在源模块末尾集中导出（当导出较多时，推荐此方式，方便管理导出）
var num = 100
var name = '王小明'
var flag = true
export {
num,
name,
flag
}
// 方式2：声明时立即导出（当导出较少时，推荐此方式）
export var num = 100
export var name = '王小明'
export var flag = true
场景2：导出的内容前后名称需要不一致，那么我们可以尝试重命名
什么意思呢？如果源模块的开发者有下面这种想法时，就应该使用重命名导出：‘我想要提高代码的可读性且有较好的语义化，此时变量或方法的名称长度一定不会太短，类似getOrderInfoFromDatabaseByHttp这种命名，但又不想让使用我的模块的人觉得我的导出名称过长’，示例如下：
// a.js
// 名称真的好长
var getOrderInfoFromDatabaseByHttp = function () {
// ...
}
export {
// 如果没有重命名，机会导出下面这一大串
// getOrderInfoFromDatabaseByHttp
// 但如果使用了重命名，方法的名称就会变得很简洁，即getOrderInfo
getOrderInfoFromDatabaseByHttp as getOrderInfo
}
场景3：模块功能单一，并且只需要导出值，不需要具名
// version.js
export default 'v1.0.0'
// index.js
import version from './version.js'
上面的代码功能很简单，只是导出项目的版本号，所以我们应该使用默认导出，而没有必要像下面这样写：
// version.js
export var version = 'v1.0.0'
// index.js
import {version} from './version.js'
结语
以上就是ES6模块的一些导入导出场景的整理，内容不多，但却很实用，希望能够对大家有所帮助~
