一篇文章说透require和import的区别-Toy模板网

这篇具有很好参考价值的文章主要介绍了一篇文章说透require和import的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 介绍

require/exports 和 import/exoprt 属于两种不同的模块化规范. require/exports 遵循 CommonJS 模块规范, 而 import/exoprt 遵循 ES6 模块规范.

那么怎么理解模块化规范?

模块化规范: 即为javascript提供模块编写模块依赖模块运行的方案

CommonJS模块规范

出现的时间在2010年左右, 属于是野生规范, 即 JavaScript 社区中的开发者自己草拟的规则，得到了大家的承认或者广泛的应用
nodejs 使用的就是 CommonJS 规范

ES6模块规范

出现的时间是在2015年, 属于是名门正派, 是 TC39 制定的新的 ECMAScript 版本, 即ES6(2015)包含进来的

2. ES model 和 CommonJS model 使用(node环境)

2.1 CommonJS

// a.js
let a = 1
let b = 1
function add(a, b) {
	return a + b
}

// 导出1
module.exports = {
	a,
	b,
	add
}

// 导出2
// exports.a = a
// exports.b = b
// exports.add = add

// index.js

// 导入
let obj = require("./a")

console.log(obj); // { a: 1, b: 1, add: [Function: add] }
console.log(obj.a); // 1
console.log(obj.b); // 2
console.log(obj.add); // add: [Function: add]

2.2 ES6

注意: CommonJS 模块是 Node.js 专用的，与 ES6 模块不兼容. 如果想要在node环境下执行import/export, 需要采用xxx.mjs的后缀名

// a.mjs

// 导出方式1
export const aaa = 'aaa'
export const bbb = 'bbb'
export const ccc = 'ccc'

const str = 'hello es module'
// 导出方式2
export default  str

// index.mjs

// 引入方式1
import { aaa , bbb, ccc } from "./a.mjs"
console.log(aaa); // 'aaa'
console.log(ccc); // 'bbb'
console.log(str); // 'ccc'

// 引入方式2  对应导出方式2
// import str from "./a.mjs"
// console.log(str); // hello es module

// 引入方式3   1 + 2结合
// import str, { aaa , bbb, ccc } from "./a.mjs"
// console.log(str);
// console.log(aaa);
// console.log(ccc);
// console.log(str);

// 引入方式4  as别名
// import { aaa as ddd } from "./a.mjs"
// console.log(ddd); // 'aaa'

// 引入方式5  * as
// import * as obj from "./a.mjs"
// console.log(obj); // { aaa: 'aaa', bbb: 'bbb', ccc: 'ccc', default: 'hello es module' }

3. ES model 和 CommonJS model 区别

3-1. ES6 模块输出的是值的引用，CommonJS 模块输出的是值的拷贝。

3-1-1. ES6 ⇒ 值的引用

解释一下, CommonJS 是值的拷贝(浅拷贝),怎么理解, 可以理解为 ⇒ 输出一个值, 如果模块内部这个值改变,输出的值不会受影响, 看下面代码

// a.js
var num = 1
function add() {
	num++
}

module.exports = {
  num,
  add,
}

// index.js
// 导入
let obj = require("./a")

console.log(obj.num); // 1   输出一个值
obj.add()             //     模块内部这个值改变
console.log(obj.num); // 1   输出的值不受影响

可以看到当我执行obj.add()之后,在打印obj.num,发现这个值并没有改变. 为什么呢? 这是因为mod.counter是一个原始类型的值，会被缓存。除非写成一个函数，才能得到内部变动后的值。

3-1-2. CommonJS ⇒ 值的拷贝

ES module 运行机制和 Commonjs 不一样, 预编译的时候如果读到了 import, 那么就会生成一个只读的引用, 再根据这个引用去对应模块取值. 意思就是原始值变了, import加载的值也会跟这边, 因此，ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块

// a.mjs
export var num = 1
export function add() {
	num++
}

// index.mjs
import { num , add } from "./a.mjs"

console.log(num); // 1  输出一个值
add()			  //    模块内部这个值改变
console.log(num); // 2  输出的值受影响

3-2. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成

// commonjs
let _fs = require('fs')
let stat = _fs.stat
let exists = _fs.exists
let readfile = _fs.readfile
// 上面需要等待整体加载玩fs模块,生成一个_fs模块,然后再从对象上读取三个方法.这种加载称为运行时加载

// es
import { stat, exists, readfile } from 'fs'
// 上面直接冲fs模块中加载3个方法,其他方法不加载,这种加载称为编译时加载. 即es6可以在编译的时候就完成模块加载

3-3. CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段。

同步: 会阻塞后续代码

异步: 不会阻塞后续代码

commonjs

// index.js
const A = require('./a')
console.log('index.js执行');

// a.js
console.log('a.js执行')
const foo = () => {
  console.log(require('./b').c);
}

foo()

module.exports = {
  foo
}

// b.js
console.log('b.js执行');

const c = 3

module.exports = {
  c
}

//执行node index.js
// a.js执行
// b.js执行
// 3
// index.js执行

es

// index.mjs
import { foo } from "./a.mjs"
console.log('index.js执行');

// a.mjs
console.log('a.mjs执行')
export const foo = () => {
  import('./b.mjs').then(({c}) => {
    console.log(c);
  })
}

foo()

// b.mjs
console.log('b.mjs运行');

export const c = 3

//执行node index.mjs
// a.mjs执行
// index.js执行
// b.mjs运行
// 3

可以看出来: import()是异步加载的,因为index.js在前面打印了,而不是在最后打印,代表他没有被阻塞

3-4. 变量提升

es6

// a.mjs
console.log('我是a.mjs内容');
import { num } from './b.mjs'
console.log(num);

// b.mjs
console.log('我是b.mjs内容');
export let num = 100

// 执行 node a.mjs
// 我是b.mjs内容
// 我是a.mjs内容
// 100

commonjs

// a.js
console.log('我是a.js内容');
let obj = require('./b')
console.log(obj.num);

// b.js
console.log('我是b.js内容');
let num = 100
module.exports = {
  num
}

// 执行 node a.js
// 我是a.js内容
// 我是b.js内容
// 100