说说 CommonJS 中的 require 和 ES6 中的 import 区别?
提问
CommonJS 中的 require/exports 和 ES6 中的 import/export 区别?
回答
- CommonJS 模块是运行时加载,ES6 Modules 是编译时加载并输出接口。
- CommonJS 输出是值的拷贝;ES6 Modules输出的是值的引用,被输出模块的内部的改变会影响引用的改变。
- CommonJs 导入的模块路径可以是一个表达式,因为它使用的是 require() 方法,甚至这个表达式计算出来的内容是错误的路径,也可以通过编译到执行阶段再出错;而ES6 Modules 只能是字符串,并且路径不正确,编译阶段就会抛错。
- CommonJS this 指向当前模块,ES6 Modules this 指向 undefined
- ES6 Modules 中没有这些顶层变量:arguments、require、module、exports、__filename、__dirname
此总结出自 如何回答好这个高频面试题:CommonJS和ES6模块的区别?,笔者在这里做一些其他的分析
关于第一个差异运行时加载和编译时加载
这是最大的一个差别。commonjs 模块在引入时就已经运行了,它是“运行时”加载的;但 es6 模块在引入时并不会立即执行,内核只是对其进行了引用,只有在真正用到时才会被执行,这就是“编译时”加载(引擎在编译代码时建立引用)。很多人的误区就是 JS 为解释型语言,没有编译阶段,其实并非如此。举例来说 Chrome 的 v8 引擎就会先将 JS 编译成中间码,然后再虚拟机上运行。
CommonJS 加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。
由此引发一些区别,如 require 理论上可以运用在代码的任何地方,可以在引入的路径里加表达式,甚至可以在条件判断语句里处理是否引入的逻辑。因为它是运行时的,在脚本执行时才能得知路径与引入要求,故而甚至时路径填写了一个压根不存在的地址,它也不会有编译问题,而在执行时才抛出错误。
// ...a lot code
if (true) {
require(process.cwd() + '/a');
}
但是 import 则不同,它是编译时的,在编译时就已经确定好了彼此输出的接口,可以做一些优化,而 require 不行。所以它必须放在文件开头,而且使用格式也是确定的,路径里不许有表达式,路径必须真实能找到对应文件,否则编译阶段就会抛出错误。
import a from './a'
// ...a lot code
关于第一个差异,是因为CommonJS 加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。
关于第二点 CommonJS 输出的是值的拷贝
的补充
// a.js
var name = '张三';
var sex = 'male';
var tag = ['good look']
setTimeout(function () {
console.log('in a.js after 500ms change ', name)
sex = 'female';
tag.push('young');
}, 500)
// exports.name = name;
// exports.sex = sex;
// exports.tag = tag;
module.exports = {
name,
sex,
tag
}
// b.js
var a = require('./a');
setTimeout(function () {
console.log(`after 1000ms in commonjs ${a.name}`, a.sex)
console.log(`after 1000ms in commonjs ${a.name}`, a.tag)
}, 1000)
console.log('in b.js');
若运行 b.js,得到下面的输出
$ node b.js
in b.js
in a.js after 500ms change 张三
after 1000ms in commonjs 张三 male
after 1000ms in commonjs 张三 [ 'good look', 'young' ]
把 a 和 b 看成两个不相干的函数,a 之中的 sex 是基础属性当然影响不到 b,而 a 和 b 的 tag 是引用类型,并且是共用一份地址的,自然 push 能影响。
补充说明 require 原理
require 是怎么做的?先根据 require('x') 找到对应文件,在 readFileSync 读取, 随后注入exports、require、module三个全局变量再执行源码,最终将模块的 exports 变量值输出
Module._extensions['.js'] = function(module, filename) {
var content = fs.readFileSync(filename, 'utf8');
module._compile(stripBOM(content), filename);
};
读取完毕后编译
Module.prototype._compile = function(content, filename) {
var self = this;
var args = [self.exports, require, self, filename, dirname];
return compiledWrapper.apply(self.exports, args);
};
上面代码等同于
(function (exports, require, module, __filename, __dirname) {
// 模块源码
});
模块的加载实质上就是,注入exports、require、module三个全局变量,然后执行模块的源码,然后将模块的 exports 变量的值输出。
补充说明 Babel 下的 ES6 模块转化
Babel 也会将 export/import的时候,Babel也会把它转换为exports/require的形式。
// m1.js
export const count = 0;
// index.js
import {count} from './m1.js'
console.log(count)
Babel 编译后就应该是
// m1.js
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.count = void 0;
const count = 0;
// index.js
"use strict";
var _m = require("./m1.js");
console.log(_m.count);
exports.count = count;
正因为有 Babel 做了转化,所以 require 和 import 才能被混用在一个项目里,但是你应该知道这是两个不同的模块系统。
题外话
留个思考题给大家,这两种模块系统对于循环引用的区别?有关于循环引用是啥,参见我这篇Node 模块循环引用问题