ES6中模块的导入和导出

问题描述：

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

项目的树形结构是这样的：

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如下：

in 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？听起来像循环依赖。我想这是后果。无论如何，您总是可以尝试在已命名导入的未定义错误的地方导入'*'并记录导入的内容。 – estus

用花括号，我相信它只导入指定的模块（在这种情况下，动作）。如果是这样，它不会导致循环dep。是的，import *按照它应该打印的动作类型和函数定义。但是我想要的输入是未定义的日志记录 – Khorkhe

再次，在UserReducer.js中，您正在导入导入UserReducer.js的文件。这是循环依赖性，CD不好。即使这可以在真正的ES6模块中按预期工作（不确定），但没有真正的ES6模块（ES模块规范甚至尚未完成）。这些模块是经过转换的，你依赖巴贝尔如何对待CD。如果您发现问题不在CD中，请将其从等式中删除，然后根据该问题重新提出问题。 – estus

答

原因@estus是正确的，即使从index.js导入另一个导出的零件也会导致循环依赖。

我想索引。js是用户独特的界面，但它看起来只适用于“用户”之外的组件。在内部，导入将直接来自操作文件

ES6中模块的导入和导出

相关推荐