一文彻底搞懂前端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中进行体验，要按照如下两步骤进行配置：
- 确保安装了
v14.15.1或者更高版本的node.js
可以使用在
cmd窗口中使用node -v命令查看当前版本号
- 在
package.json的根节点中添加"type":"module"节点
- 在一个空文件夹内，执行
npm init -y，这时候我们就能看见已经自动生成了package.json文件了- 在
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
}
注意事项
每个模块中，只允许用唯一的一次
export default，否则会报错！
默认导入
语法：
import接收名称form模块标识符
// 从 test.js 模块中导入 export default 向外共享的成员
// 并使用 test 进行接收
import testform './test.js'
console.log(test)
// 输出为: {
name: '张三', fn: [Function:fn]}
注意事项
默认导入的时候，接收名字可以任意写，注意是合法的成员名称就行。
// test 合法 不报错
import test form './test.js'
// 成员名称不能用数字开头，所以会直接报错
import 123 form './test.js'
5.2 按需导出与按需导入
按需导出
语法：
export按需导出的成员
// test.js:
// 向外按需导出变量 name
export let name = 'admin'
// 向外按需导出方法 show
export function show(){
}
按需导入
语法：
import { name } from模块标识符
import {
name, show } form './m1.js'
console.log(name) // admin
console.log(show) // [Function: show]
注意事项
每个模块中可以使用多次按需导出
按需导入的成员名称必须跟按需导出的名称一致
按需导入时，可以使用as关键字进行重命名
按需导入可以和默认导入一起使用
重命名：
import {
name as username } form './test.js'
使用as关键字，将name重命名为username，所以接下来我们使用username就好了，不能再使用name这个名字。
按需导入和默认导入一起使用：
import info, {
name as username } form './test.js'
info就是默认导入，后面带大括号的就是按需导入。
5.3 直接导入并执行模块中的代码
如果只想单纯的执行某个模块中的代码，并不需要得到其内部向外共享的成员，可以这样做：
// test.js:
for(let i = 0; i < 6; i++){
console.log(i)
}
-------------------------
// 直接导入并执行模块中的代码
import './test.js'