ES6 模块的导入和导出答案

【问题标题】：import and export of modules in ES6ES6 模块的导入和导出
【发布时间】：2017-06-29 09:49:51
【问题描述】：

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

项目的树形结构如下：

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 }

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

在 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，则应用程序可以正常运行。

【问题讨论】：

那么，在 UserReducer.js 中，您正在导入导入 UserReducer.js 的 index.js？听起来像循环依赖。我想这就是后果。无论如何，您总是可以尝试在命名导入出现未定义错误的地方导入* 并记录导入的内容。
使用花括号，我相信它只导入指定的模块（在这种情况下是操作）。如果是这样，它不会导致循环依赖。是的， import * 会按应有的方式打印操作类型和函数定义。但是我想要的导入记录未定义
再次，在 UserReducer.js 中，您正在导入用于导入 UserReducer.js 的文件。这是循环依赖，CD不好。即使这可以在真正的 ES6 模块中按预期工作（不确定），也没有真正的 ES6 模块（ES 模块规范甚至还没有完成）。模块被转译，您依赖 Babel 处理 CD 的方式。如果您发现问题不在 CD 上，请从等式中消除它并据此重新提问。

标签： javascript ecmascript-6 es6-modules

【解决方案1】：

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

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

【讨论】：