Question

我正在重构我的模块导入和导出结构。这里的目标是通过index.js在多个文件中导入UserActions（即，在UserReducer.js和Home.js中）。

项目的树状结构如下：

js
|_ modules
|  |_ user
|  |  |_index.js
|  |  |_UserActions.js
|  |  |_UserReducer.js
|  |  |_UserSagas.js
|_ containers
|  |_ Home.js

这是modules/user/index.js：

的内容

import * as UserActions from './UserActions'
import * as UserSagas from './UserSagas'
import UserReducer from './UserReducer'

export { UserActions, UserReducer, UserSagas }

最初，UserReducer.js和Home.js中的UserActions文件直接导入操作，如下所示：

：import * as UserActions from './UserActions'
in Home.js：import * as UserActions from 'modules/user/UserActions'

一切都正常。现在我希望这两个导入使用上面的index.js文件。

第1步）

在UserReducer中，我改变了导入行：

import * as UserActions from './UserActions'

为：

import { UserActions } from '.'  // fetches the named export from index.js

这很有效。

第2步）

在Home.js中，我改变了导入行：

import * as UserActions from 'modules/user/UserActions'

为：

import { UserAction } from 'modules/user'

现在webpack并没有抱怨，但浏览器在UserReducer中抛出错误，UserActions未定义。

最后：

使用import { UserActions } from 'path_to_index.js'符号有效，只要我在一个地方使用它（可以在任一文件中）。

一旦我在两个地方都使用它，所有地狱都会崩溃......

有什么想法吗？感谢

编辑：我意识到上述错误只有在user / index.js导入和导出UserSagas时才会发生。如果我直接从他们的文件导入UserSagas而不是将其添加到index.js，则该应用程序可以正常运行。

Answer 1

结果证明@estus是正确的，即使从index.js导入另一个导出的部分也会导致循环依赖。

我希望index.js成为用户的唯一界面，但看起来它只适用于“用户”之外的组件。在内部，导入将直接来自操作文件

ES6中模块的导入和导出

1 个答案: