export default vs module.exports差异

Question

这有效:

import {bar} from './foo';
bar();

// foo.js
module.exports = {
 bar() {}
}

这有效:

import foo from './foo';
foo.bar();

// foo.js
export default {
 bar() {}
}

那么为什么这不起作用呢？

import {bar} from './foo';
bar();

// foo.js
export default {
 bar() {}
}

它抛出TypeError: (0 , _foo.bar) is not a function.

Answer 1

当你有

export default {
  bar() {}
}

导出的实际对象具有以下形式:

exports: {
  default: {
    bar() {}
  }
}

当您进行简单导入(例如import foo from './foo';)时,您实际上是在导入中获取默认对象(即,exports.default).当你运行babel编译到ES5时,这将变得很明显.

当您尝试导入特定功能(例如,import { bar } from './foo';)时,根据您的情况,您实际上是尝试获取exports.bar而不是exports.default.bar.因此bar函数未定义的原因.

当您只有多个导出时:

export function foo() {};
export function bar() {};

你最终会有这个对象:

exports: {
  foo() {},
  bar() {}
}

因此import { bar } from './foo';会起作用.这是类似的情况,module.exports您基本上存储如上所述的导出对象.因此,您可以导入条形函数.

我希望这很清楚.