说说 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 模块循环引用问题
