Require和Import的区别
OUDUIDUI

历史背景

  • require/exports
    • 来自野生规范当中,即这些规范是JavaScript社区中的开发者自己草拟的规则,得到了大家的承认和广泛的应用,比如CommonJSAMDCMD等等。而Node遵循CommonJS规范,requireJS遵循AMDseaJS遵循CMD
    • 因为Node无法直接兼容ES6语法,所以现阶段require/exports仍然是必要且是必须的。
  • import/export
    • 来自ES6的新规范,即TC39 制定的新的 ECMAScript 版本。
    • babel诞生后,它能将还未被宿主环境(各大浏览器、Node)直接支持的ES6语法编译为ES5,也就是能将ES6 Moduleimport/export编译为CommonJSrequire/exports这种写法。

差异

写法差异

require/exports

1
2
3
4
5
6
/* 导出 */
exports.fs = fs; // 单个特性导出,可导出多个
module.exports = fs; // 整个模块导出,每个模块只包含一个

/* 引入 */
const fs = require('fs'); // 引入整个模块

import/export

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 导出 */
export default fs; // 默认导出 每个模块包含一个 每次导出都会覆盖前一个导出
export const fs; // 导出单个特性 每个模块包括多个
export function readFile; // 导出单个特性 每个模块包括多个
export { readFile, read }; // 导出列表
export * from 'fs'; // 导出模块合集

/* 引入 */
import fs from 'fs'; // 引入整个模块的内容
import '/fs.js'; // 仅为副作用而引入一个模块 不导入模块中的任何接口
import * as fs from 'fs'; // 引入整个模块的内容
import { readFile } from 'fs'; // 引入readFile单个接口
import { readFile as read } from 'fs'; // 引入模块中read接口,并重命名为readFile
import fs , { readFile } from 'fs'; // 引入整个模块的内容和readFile接口

输出差异

require/exports

require/exports 输出的是一个值的拷贝,也就是说,当你引入一个值,模块内部的变化是影响不到这个值的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// test.js
let num = 0;
function addNum(){
num++;
};
module.exports = {
num: num,
addNum: addNum
}

// main.js
const test = require('./test.js');

console.log(test.num); // output: 0
test.addNum();
console.log(test.num); // output: 0

import/export

import/export输出的是值的索引,也就是说,该引用其实是一个动态引用,并不会缓存值,当模块内部发生变化,你的引入值也会随之更新。

1
2
3
4
5
6
7
8
9
10
11
12
// test.js
export let num = 0;
export function addNum(){
num++;
};

// main.js
import { num, addNum } from './test.js';

console.log(num); // output: 0
addNum();
console.log(num); // output: 1

加载差异

require/exports

CommonJS模块是运行时加载。

因为CommonJS模块加载的是一个对象,即module.exports属性,该对象只有在脚本运行完才生成,也因此没办法再编译时做“静态优化”。

1
2
3
4
5
6
7
const { test1, test2, test3 } = require('test');

/* 等同于 */
const _test = require('test'); // 实质上加载了整个模块,再从中读取这三个方法
const test1 = _test.test1;
const test2 = _test.test2;
const test3 = _test.test3;

import/export

ES6模块是编译时输出接口。

ES6模块不是对象,它对外接口只是一个静态定义,在代码静态解析阶段才会生成,因此效率要比CommonJS模块加载高。

1
import { test1, test2, test3 } from 'test';   // 只从模块中加载这三个方法,其他的不加载

异步差异

require/exports

CommonJS模块中的require是同步加载模块。

import/export

ES6模块的import命令是异步加载的,有一个独立的模块依赖的解析阶段。

 Comments