ES6中模块的导入导出

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 文件导入的，如下所示：

在UserReducer.js中：import * as UserActions from './UserActions'
在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 成为用户的唯一界面，但它看起来只适用于 "users" 之外的组件。在内部，导入将直接来自操作文件

ES6中模块的导入导出

import and export of modules in ES6

javascript

ecmascript-6

es6-modules