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的类似情况一样，您实际上存储了如上所述的导出对象。因此，您可以导入条形函数。

我希望这很清楚。

Answer 2

//for your 3rd case this should work

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

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

Answer 3

当然不起作用，你输出了foo default并用花括号{}导入它。为了保持简单，请记住这一点，如果您要导出默认方式，则不需要花括号，但如果您要正常导入模块，则使用大括号{}进行访问模块中的特定功能;）。您可以看到示例here