javascript - Webpack require 方法返回意外的对象

Question

我最近将 webpack 从版本 1.12.9 升级到 1.12.13，并将 babel 从 5 升级到 6，升级后部分代码中断:

const DevTools = require('../components/DevTools.js')
DevTools.instrument()

我收到以下错误:

Uncaught TypeError: DevTools.instrument is not a function

然后我在调用 instrument() 之前添加了 console.log(DevTools)，这是 Chrome 控制台中的输出:

> Object {__esModule: true}
  > __esModule: true
  > default: DevTools(props, context)
  > __proto__: Object

为了解决此问题，我使用了 import 而不是 require:

import DevTools from '../components/DevTools.js'

再次打印 console.log(DevTools) 会给出以下结果:

DevTools(props, context) {
      _classCallCheck(this, DevTools);
      var _this = _possibleConstructorReturn(this, _Component.call(this, props, context));
      if (!props.store && !…

这正是我想要导入的并且现在工作正常。

有人知道为什么会发生这种情况吗？这个错误是因为webpack或者babel升级导致的吗？

Answer 1

您也可以通过添加 default 有条件地要求它们，而不是总是导入 DevTools

const DevTools = require('../components/DevTools.js').default;