作者：Lpyexplore

链接：https://lpyexplore.blog.csdn.net/article/details/109740863

来源：CSDN
著作权归作者所有，转载请联系作者获得授权，切勿私自转载。

学了JS并且用过Node.js后，对模块化应该是有所了解和使用了，那么一定见过以下两种模块导入导出的方式

第一种： ES6 Module

// B.js
function show() {
	console.log('show方法被执行')
}

export default show

// A.js
import show from './B.js'
show()  // show方法被执行

第二种： CommonJS

// B.js
function show() {
	console.log('show方法被执行')
}

module.exports = {
	show
}

// A.js
const bModule = require('./B.js')

bModule.show()  // show方法被执行

以上两种导入导出方法涉及到了两种模块规范，分别是ES6 Module 、CommonJS

本文就来聊聊这两者之间的具体使用与区别

• 公众号：前端印象

• 不定时有送书活动，记得关注~

• 关注后回复对应文字领取：【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

CommonJS && ES6 Module

1. CommonJS

CommonJS是2009年由JavaScript社区提出的包含了模块化的一个标准，后来被Node.js所采用并实现，也就是说我们在Node.js中用到的模块导入导出都是依照CommonJS标准来实现的

1.1 导出

我们可以把一个文件看成一个模块，每个模块之间是互相独立的，即不会互相影响。当需要使用到某个模块时，只需在文件中将目标模块导入即可

要想被其它模块导入首先需要导出需要向外暴露的变量或方法，在CommonJS中导出的语法有以下两种方式

// B.js
// 定义了函数show
function show() {
	console.log('show方法被调用')
}

// 定义了变量count
let count = 3

/*--------------  导出方法  --------------*/

// 第一种
module.exports = {
	show,
	count
}

// 第二种
exports.show = show
exports.count = count

上述代码中，两种导出方式是等价的。

第一种导出方式是将需要导出的函数或变量存储到 module.exports 里面，其中 module.exports 原本是一个空对象

第二种导出方式中，exports 在内部其实是指向了 module.exports，所以当我们执行 exports.变量 或 exports.函数时，其实就相当于把变量或函数存储到 module.exports 中

注意： 这里要特别强调的是，在使用第二种导出方式时，不能对 exports 进行重新赋值，否则就将 module.exports 直接全部覆盖了

1.2 导入

再来看一下CommonJS的导入语法

// A.js
const bModule = require('./B.js')

console.log(bModule.count)  // 3

bModule.show()  // show方法被调用

从上述代码中可以看到，CommonJS是通过 require 方法来导入模块的，其参数为模块文件路径，要特别注意的是，我们导入模块后接收到的其实是一个对象，也就是 module.exports 的值，我们能从该对象中获取到所需的变量或函数

另外，比较特别的是，require 方法还可以接收一个表达式作为参数，代码如下

let fileName = 'B.js'
const bModule = require('./' + fileName)

因此，我们是可以动态的改变并决定模块的加载导入路径的

2. ES6 Module

如标题名写的，该模块标准是在ES6时才被提出的，此后JS才具有了模块化这一特性

2.1 导出

在ES6 Module 中，导出用到了关键字 export ，导出的方式也大致分为两种，分别是命名导出 、默认导出

第一种： 命名导出

// B.js
/*--------  单个变量或函数导出  ----------*/
export function show() { console.log('show方法被调用') }

export let count = 3

/*--------  批量导出  ----------*/
function show() { console.log('show方法被调用') }

let count = 3

export {show, count}

上述代码分了两种情况，且这两种写法是等价的

第一种是单个的变量或函数导出，只需要直接在开头使用 export 关键字即可；

第二种情况是批量地把多个变量或函数导出，只需要把它们储存到一个对象中即可

第二种： 默认导出

// B.js
function show() { console.log('show方法被调用') }

// 命名导出变量count
export let count = 3

// 默认导出函数show
export default show

默认导出是在 export 关键词后面再跟上一个 default 表示导出的该变量或函数是匿名的

注意： 一个模块只能默认导出一次，否则就会报错，具体原因会在后面讲解

2.2 导入

ES6 Module 的导入用到的关键字是 import ，具体代码如下

// A.js
import {show, count} from './B.js'

show()   // show方法被调用

console.log(count)  // 3

ES6 Module的导入需要用一对 {} 大括号来接收我们需要导入的方法或函数

注意： 大括号中的变量或函数名必须与导出时的名称一模一样

那么如果我们想修改导入的变量或函数的名称，可以通过 as 关键词来命名，代码如下

// A.js
import {show as print, count as number} from './B.js'

print()   // show方法被调用

console.log(number)  // 3

如果我们要想将所有的变量或函数都导入，可以通过 * 来整体导入，代码如下

import * as bModule from './B.js'

bModule.show()  // show方法被调用

console.log(bModule.count)  // 3

* 表示全部的意思，我们将其全部导入，并赋值给 bModule，这样我们就可以通过 bModule 获取想要的变量或对象了

以上所说的都是针对命名导出的变量或函数，那么如何导入一个默认导出的变量或函数呢？

// 将通过 export default 导出的变量导入import print from './B.js'print()  // show方法被调用1234

命名导出的变量都是通过 {} 来接收的，那么去掉 {} ，接收的就是默认导出的变量了，因为导出的变量是匿名的，因此我们可以随意地起个变量名用于接收

补充： 这里特别提一下，与CommonJS不同，ES6 Module 的导入文件路径是不支持表达式的