使用 ES6 时，导入函数如何在一个文件中未定义，而在另一个文件中未定义？

Question

我将 babel / ES6 与 webpack 结合使用。我在两个不同的地方导入相同的 'actions' 文件——导出一堆函数。在一个地方 returns 一个模块，另一个 undefined:

actions.js

export function test() { ... }
export function test2() { ... }

App.js

import actions from './actions'
class App extends React.Component { ... }
console.log(actions);         //<--------  Object{test:function,test2:function)
export default connect((state) => { ... },actions)(App);

编辑 App.js 工作的原因是因为它实际上使用 import * as actions 如下所示，我只是在示例中重新输入错误

NestedComponent.js

import actions from './actions'
class NestedComponent extends OtherComponent { ... }
console.log(actions);         //<--------  logs undefined
export default connect((state) => { ... },actions)(NestedComponent);

这与webpack定义modules/files的顺序有关吗？

Answer 1

这在任何一种情况下都不起作用，因为您导入了错误的值。 import foo from '...' 导入模块的 default 导出，但您没有默认导出，您只有命名导出。

你应该使用的是

import {test, test2} from './actions';
// or
import * as actions from './actions';

Answer 2

发生这种情况的另一种常见情况是，如果您使用 Jest 进行测试并且启用了自动模拟行为。很悲痛，这样的陷阱。

Answer 3

我运行陷入了类似的问题，由循环依赖引起。尝试从文件 'B' 导入文件 'A' 中的常量，而文件 'B' 又尝试从文件 'A'.

导入常量

使用 ES6 时，导入函数如何在一个文件中未定义，而在另一个文件中未定义？

When using ES6, how can an imported function be undefined in one file, and not in another?

ecmascript-6

reactjs

webpack

babeljs

redux