javascript - 导出默认值与 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类似。您本质上是像上面一样存储一个导出对象。因此您可以导入 bar 函数。

我希望这足够清楚。