前几天写测试代码的时候遇到了一个 Bug 苦思不得其解。最后才发现尽然是用新的 ES6 中的 import 代替老的 require 引起的。所以下来花了一点时间来研究一下两者的区别。
神奇的 Bug
先来看一看这个神奇的 Bug。在example.js 文件中用 CommonJS 的 require 方式引用了一个 helper 文件，而这个文件中封装了 window 等对象：
//helper 中封装了 window 等对象
const {window} = require('src/helpers');
而在测试文件exampleSpecs.js中有这样一个测试，它在 beforeEach 中修改了 helper 中的 window 对象：
...
describe('example', () => {
beforeEach(() => {
const helpers = require('src/helpers');
helpers.window = {navigator: {onLine: true}};
});
it('description...', () => {
//testCode
});
然后我在重构代码的时候用 ES6 语法 import 代替 CommonJS 语法 require：
import {window, location} from 'src/helpers';
此时测试报错：Cannot read property 'state' of undefined。 错误中的state是window对象下的一个属性。
现在可以进入正题了。在上述的代码中我仅仅是用 import 代替了 require 难道它们两的功能不是一样的吗？如果是，这里的错从何来？
babel 对 import 和 require 的解析
import 是 ES6 的语法，而我们项目在开始使用 ES6 语法时大多数浏览器并不支持，所以我们用 babel 将 ES6 的语法解析成 CommonJS 的语法。想到这里，那问题是不是出自 babel 呢？下面就来看看这两行 code 在 babel 中的编译结果。
//编译前
const {window} = require('src/helpers');
//编译后
var _require = require('src/helpers'),
window = _require.window;
//编译前
import {window} from 'src/helpers';
//编译后
var _helpers = require('src/helpers');
可以发现使用 require 引用的情况下，helper 中的
window对象被赋值给了一个叫window的变量。而在使用 import 引用的情况下，helper 中的window对象没有被赋值，此时，当我们要访问 window 对象时，则通过_helpers.window来访问。其实这就是造成我们上述 Bug 的真正原因。
回到之前的 Bug，在example.js中如果用 require 进行引用的话那么其实引用的 window 对象是通过 helper.window 赋值的对象（称之为 W1），而用 import 进行引用的话那么其实是引用了整个 helper 对象。所以当测试文件中修改了 helpers.window 的值时 W1 是不会改变的而 helpers 对象中的 window 已经改变。结果就是在我把 require 改成 import 之后，导致代码里面的 window 实际上是引用的 helpers.window 并且它的值被修改了（改变后的值没有 state 这个属性），所以 error Cannot read property 'state' of undefined 就理所当然的发生了。
为了方便理解，可以参考下面的简图。
从 require 来的 window 直接指向了 Value 1，而从 import 来的 window 则是通过拷贝 helpers 然后通过 helpers.window 得到的。所以当我们改变 helpers.window 的值时就会发生如下改变：
如图所示，此时 import 中最终指向的值为 Value2 而 require 则指向 Value1。