该用require还是用import?

概念

CommonJs是一种模块化规范，在ES6之前的，用于服务器端nodeJs和浏览器端。

ES6标准发布后，模块化标准是以export指令导出接口，以import引入模块。

但是在node模块中，我们依旧很多地方采用的是CommonJS规范
即：使用module.exports导出接口，使用require引入模块。

这两种方式我们或多或少都有用过，只是不了解这是2种不同的规范

---

一、ES6模块化的使用

es6中模块化靠export { }暴露导出模块，靠import ... from '...'引入模块

1、es6中的export

模块js使用export命令输出变量

注意：这里输出的必须是变量，而不能是值(包括方法)

注意：export命令不需要=，只要后面跟一个变量即可

• 正确示例：

// 直接暴露
export var test = 'Michael';

// 设置变量暴露
var test = 'Michael';
export {
  test
}

• 错误示例：

// 直接暴露
export 1;	//报错
// 设置变量暴露

var test = 1;
export test;	//报错

• 以上错误的原因，是因为export命令后面不是变量而是一个值，即使是赋值给了test，它也是一个值(方法同理)。
• 正确用法中是把值包在了对象里{ test }

2、es6中的import

目标文件，使用import ... form '...'引入模块(前提是暴露模块正确)

import命令引入没什么坑，主要延伸是结合ES6的解构赋值

• 普通引入示例

import fs from 'fs'		//引入整个fs模块

var test = fs.star(....)	//调用fs模块中的star方法

• 解构引入示例

import { stat,readFile } from 'fs'		//引入fs模块中的stat,readFile方法，其余不引入

var test = star(....)	//调用fs模块中的star方法

---

二、CommonJs规范的使用

CommonJs规范靠exports.xx = xx或module.exports = { xx }暴露导出模块。
靠var xx = require('...')或var { stat, exists, readFile } = require('fs');引入模块

1、CommonJs中的exports

注意：这里的exports不是一个命令
注意：这里的exports是有s的，且后面需要使用=，这里我的理解，exports自身是变量，引入就是依靠这个变量进行的

• 使用exports示例

var test = 1;
exports.test = test;

• 使用module.exports示例

var test = 1;
module.exports = {
  test
}

2、CommonJs中的require

导入也没什么坑，同样可以使用解构

• 普通引入示例

var fs = require('fs')		//引入整个fs模块

var test = fs.star(....)	//调用fs模块中的star方法

• 解构引入示例

var { stat,readFile } = require('fs')		//引入fs模块中的stat,readFile方法，其余不引入

var test = star(....)	//调用fs模块中的star方法

---

三、CommonJs规范与ES6中import的区别

1、引入模块的不同点

• require('xx')可以直接作为一个对象,也就是可以直接当成变量来使用，不赋值。如：require('xx').star(...)
• 而es6的import ... form ...是固定写法，不能操作

2、引入模块的性能不同点

• CommonJs规范的引入require('xx')是“运行时加载”
  
• 而es6的import ... form ...是按需引入，编译过程按照import命令来选择编译
  

3、暴露模块的不同点

• 在上面使用介绍，暴露模块的区别已经很明显了:
• es6的export命令不用=暴露一个变量（一般为对象）
• CommonJs的exports.xx=xx，是依靠exports变量自身来暴露的

四、在nodeJs中怎么使用

• 我们都知道es6是绝对通用的规范，且会更新到es7、es8等。而既然es6有模块化的方法，那么CommonJs规范将逐步被替换。
• 但是现在而言，import、export等很多es6命令，还需要依靠编译成es5来实现。
• 比如在vue-cli当中，es6的使用就需要依赖webpack的babel进行编译成es5。
• 所以在nodeJs中如果不引入babel或其他方法来编译es5的话，依旧需要老老实实使用CommonJs规范。
• ndoeJs使用es6import、export命令的解决方法，可以看阮一峰老师的ECMAScript6，.mjs后缀文件名

---

本文参考阮一峰老师的ECMAScript6

与一些关于js编译与运行的博客

如有建议和疑问可联系
QQ：1017386624
邮箱：1017386624@qq.com