一文彻底搞懂前端ES6模块化

1、前言

在以前的JavaScript中是没有模块化概念的，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。如果要进行模块化操作，就需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化，于是才有了ES6模块化的诞生。

为什么要有模块化，或者模块化的好处是什么呢？

• 大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块间的相互调用。
• 可以将一段复杂的程序拆解开来，方便维护可拓展。

2、前端模块化规范

在ES6模块化诞生之前，JavaScript社区尝试并提出了AMD、CMD、commonJS等模块化规范。
但是，这些模块化规范，存在一定的差异性与局限性，并不能通用。
例如：

• AMD和CMD适用于浏览器端的JavaScript模块化
• commonJS适用于服务器端的JavaScript模块化

• Node.js 就是遵循的这个规范
• 导入其它模块使用require()
• 导出使用module.exports对象

太多的模块化规范给开发者增加了学习的难度与开发的成本。所以，ES6模块化规范诞生了！

3、什么是ES6模块化规范

ES6模块化规范是浏览器端与服务端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需要在额外学习AMD、CMD或者commonJS等模块化规范。
ES6中模块化规范中定义：

• 每个js文件都是一个独立的模块
• 导入其他模块成员使用import关键字
• 向外共享模块成员使用export关键字

4、在node.js中体验ES6模块化

node.js中默认仅支持commonJS模块化规范，若想在node中进行体验，要按照如下两步骤进行配置：

1. 确保安装了v14.15.1或者更高版本的node.js

可以使用在cmd窗口中使用node -v命令查看当前版本号

2. 在package.json的根节点中添加"type":"module"节点

1. 在一个空文件夹内，执行npm init -y，这时候我们就能看见已经自动生成了package.json文件了
2. 在vs-code打开，在内添加"type":"module"节点即可

提示：type值默认为commonJS，所以我们平时node遵循的模块化规范都是commonJS

5、ES6模块化的基本语法

ES6的模块化主要包含如下3种用法：

• 默认导出与默认导入
• 按需导出与按需导入
• 直接导入并执行模块中的代码

5.1 默认导出与默认导入

默认导入

语法：export default 默认导出的成员

let name = '张三' // 定义模块私有成员 name
let age = 20 // 定义模块私有成员 age 因为没有共享出去，所以外界访问不到
function fn (){  // 定义模块私有方法 show
	
}
// 使用export default 默认导出语法 向外共享 name和 fn 两个成员
export default { 
	name,
    fn 
}
1
2
3
4
5
6
7
8
9
10

注意事项

每个模块中，只允许用唯一的一次 export default，否则会报错！

默认导入

语法：import接收名称form模块标识符

// 从 test.js 模块中导入 export default 向外共享的成员
// 并使用 test 进行接收
import testform './test.js'

console.log(test)
// 输出为: { name: '张三', fn: [Function:fn]}
1
2
3
4
5
6

注意事项

默认导入的时候，接收名字可以任意写，注意是合法的成员名称就行。

// test 合法 不报错
import test form './test.js'
// 成员名称不能用数字开头，所以会直接报错
import 123 form './test.js'
1
2
3
4

5.2 按需导出与按需导入

按需导出

语法：export按需导出的成员

// test.js:
// 向外按需导出变量 name
export let name = 'admin'
// 向外按需导出方法 show
export function show(){

}
1
2
3
4
5
6
7

按需导入

语法：import { name } from 模块标识符

import { name, show } form './m1.js'
console.log(name) // admin
console.log(show) // [Function: show]
1
2
3

注意事项

每个模块中可以使用多次按需导出
按需导入的成员名称必须跟按需导出的名称一致
按需导入时，可以使用as关键字进行重命名
按需导入可以和默认导入一起使用
1
2
3
4

重命名：

import { name as username } form './test.js'
1

使用as关键字，将name重命名为username，所以接下来我们使用username就好了，不能再使用name这个名字。

按需导入和默认导入一起使用：

import info, { name as username } form './test.js'
1

info就是默认导入，后面带大括号的就是按需导入。

5.3 直接导入并执行模块中的代码

如果只想单纯的执行某个模块中的代码，并不需要得到其内部向外共享的成员，可以这样做：

// test.js:
for(let i = 0; i < 6; i++){
	console.log(i)
}
-------------------------
// 直接导入并执行模块中的代码
import './test.js'
1
2
3
4
5
6
7