这有效:
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
。
最佳答案
当你有
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 函数。
我希望这足够清楚。
关于javascript - 导出默认值与 module.exports 的差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41666130/