聊聊CommonJS与ES6 Module的使用与区别

た入场券 2022-12-22 00:57 160阅读 0赞

学了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
 *   *  1.1 导出
     *  1.2 导入
 *  2. ES6 Module
 *   *  2.1 导出
     *  2.2 导入
 *  3. CommonJS 与 ES6 Module 的区别
 *   *  3.1 区别一
     *  3.2 区别二
 *  4. The end

# 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方法被调用

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

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

# 3. CommonJS 与 ES6 Module 的区别 #

这两者的主要区别主要有以下两点：

1.  对于模块的依赖，CommonJS是**动态的**，ES6 Module 是**静态的**
2.  CommonJS导入的是值的**拷贝**，ES6 Module导入的是值的**引用**

## 3.1 区别一 ##

对于模块的依赖，何为**动态**？何为**静态**？

动态是指对于模块的依赖关系建立在代码执行阶段；  
静态是指对于模块的依赖关系建立在代码编译阶段；

上文提到，CommonJS导入时，`require` 的路径参数是支持表达式的，例如

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

因为该路径在代码执行时是可以动态改变的，所以如果在代码编译阶段就建立各个模块的依赖关系，那么一定是不准确的，只有在代码运行了以后，才可以真正确认模块的依赖关系，因此说CommonJS是动态的。

那么现在你也应该也知道为什么 ES6 Module 是静态的了吧

## 3.2 区别二 ##

为了验证这一点，我准备用实例来演示一下

首先来验证CommonJS，代码如下

// B.js
    let count = 3
    
    function change() { 
        count ++    // 变量count + 1
        console.log('原count值为：', count);  // 打印B.js模块中count的值
    }
    
    module.exports = { 
        count,
        change
    }
    
    // A.js
    let count = require('./B.js').count 
    let change = require('./B.js').change
    
    console.log('改变前：', count);   
    change()     // 调用模块B.js中的change方法，将原来的count + 1
    console.log('改变后：', count); 
    
    // 运行A.js文件的结果
    改变前：3
    原count值为：4
    改变后：3

在上述代码中我们可以看到，在 `A.js` 文件中导入了 `B.js` 文件中的变量 `count` 和 函数 `change`，因为导入的 `count` 只是对原有值的一个拷贝，因此尽管我们调用了函数 `change` 改变了 `B.js` 文件中变量 `count` 的值，也不会影响到 `A.js` 文件中的变量 `count`

根据这个结果得出结论：CommonJS导入的变量是对原值的拷贝

--------------------

接下来再来验证一下ES6 Module，代码如下

// B.js
    let count = 3
    
    function change() { 
        count ++        // 变量count + 1
        console.log(count);   // 打印B.js模块中count的值
    }
    
    export { count, change}
    
    // A.js
    import { count, change} from './B.js';
    
    console.log('改变前：',count);
    
    change()         // 调用模块B.js中的change方法，将原来的count + 1
    
    console.log('改变后：', count);
    
    // 运行A.js文件的结果
    改变前：3
    原count值为：4
    改变后：4

相比较于CommonJS的结果，ES6 Module导入的变量 `count` 随着原值的改变而改变了

根据这个结果得出结论：ES6 Module导入的变量是对原值的引用

# 4. The end #

本篇文章就到此结束啦，关于CommonJS和ES6 Module，还有一些本文未提及的知识，还是希望大家深入了解