ES6 模块导入读不到个别属性

Question

import 无法导入某个模块，但之前在其他文件导入这个模块是正常的。

有问题的文件：moduleB.jsx

import ...

import * as Aspect from 'path/to/file/linked.ts';

console.warn(Aspect);

for (let key in Aspect) {
  console.info(key);
}
console.warn(Aspect.Linked);

...

class ComponentB extends Component {

}

上面的 console 打出来的 Log

图上可以看到，直接打出 Aspect，Chrome 上以看到里面有个 Linked，但是用 Aspect.Linked 打出来就是 undefined，而且 for-in 也找不到这个属性。

然后我添加一个空行并保存，这个时候 webpack 热重载了下，再次打出来的 log 找到了这个属性，这是为什么呢？

---

正常的模块： moduleA.jsx

import ...

import { Linked } from 'path/to/file/linked.ts'; // 正常读取 Linked

...

class ComponentA extends Component {

}

被引入的模块: linked.ts

import ...

export class Linked extends ParentClass {

  static methodA() {
  }

  ...
}

babel 编译后的 moduleA

/***/ }),
/* 185 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
/* WEBPACK VAR INJECTION */(function(module) {

Object.defineProperty(exports, "__esModule", {
  value: true
});

...

var _linked = __webpack_require__(177);
var Aspect = _interopRequireWildcard(_linked);

...

console.warn(Aspect);

for (var key in Aspect) {
  console.info(key);
}
console.warn(Aspect.Linked);

...

Answer 1

经过排查问题，查看 webpack 打包后的代码发现

let Aspect = require('path/to/file/linked.ts');
window.Aspect = Aspect;

console.warn(Aspect);

第一行代码同步返回时，Aspect 只有 __esModule 这一个变量，随后在 Chrome 的 console 中输出 window.Aspect，它已经有了之前没有拿到的属性。

这就意味着，require 返回了 module.exports 的指针，而且 exports 指针随后被异步修改（其实我也不太懂我在说什么，为什么会这样？），最终同步得到的 Aspect 缺少了某些属性。

---

找到了错误的原因，我在另一个地方引入了 moduleA，但这个时候它可能并未初始化。但我还是不太明白为什么会发生这种情况，webpack 对 React 组件文件具体是如何加载的