ES6的import/export行为不如预期

Question

我不确定这是否与React Native相关，但这是我的版本：

"react-native": "0.46.4", "babel-preset-react-native": "2.1.0",

// src/utils/a.js
export default 'a file works!'

// src/utils/b.js
export default 'b file works!'

// src/utils/index.js
import a from './a'
import b from './b'

export { a, b }

基本上，当我尝试：

import * as utils from 'src/utils'
// or
import { a, b } from 'src/utils'

它会返回未定义的 "a" 和 "b" 属性，例如：

utils = { a: undefined, b: undefined }

我不清楚在这里做错了什么，我的猜想是这些a/b.js文件没有在应该加载它们的时候加载。以前我做过一个hack，在监听函数utils.auth中，我必须添加if (auth && auth.listener)，这样就可以工作了，因为当应用程序启动时，listener是未定义的，但是随后就变成了它应该有的值。

编辑： 似乎如果我尝试：

// src/utils/index.js
const a = 'a works'
const b = 'b works'

export { a, b }

结果是相同的。

- Flávio Carvalho

---

通常情况下，当您明确导出值的模块返回 undefined 时，这是由于您的模块存在循环依赖关系。例如，如果您在 utils 加载时尝试从中导入 a，则它还没有导出该值。 - loganfsmyth

没错，我相信这就是正在发生的事情，但我能做些什么呢？ - Flávio Carvalho

你展示的代码片段不会导致这种情况，因此很难说。最好的方法是重新排列代码，避免出现循环依赖关系。 - loganfsmyth

@loganfsmyth 是的，那就是原因，我不确定如果有什么不同的做法，但如果我使用import a from 'src/utils/a'就能正常工作，这肯定和之前提到的模块循环有关。 - Flávio Carvalho

Answer 1

您可以导出文件而无需导入它。请查看我的组件文件夹中的index.js文件：

export {Content} from './Content'
export {FilterSelect} from './FilterSelect'
export {ListItem} from './ListItem'
export {Searchbar} from './Searchbar'
export {Sidebar} from './Sidebar'
export {RequiredArgument} from './RequiredArgument'
export {Loading} from './Loading'
export {ArgumentProvided} from './ArgumentProvided'
export {OverviewBar} from './OverviewBar'
export {Home} from './Home'
export {Layout} from './Layout'

这是我导入它们的方法。

import { Content, FilterSelect, ListItem, Searchbar, Sidebar, Loading, RequiredArgument, ArgumentProvided, OverviewBar} from './components/index.js'
import Layout from './components/Layout''

- Laurens Mäkel

---

谢谢，我不知道我们必须在导出后加括号。 尽管如此，它仍然无法正常工作，请检查我的编辑。 - Flávio Carvalho

Answer 2

这里似乎可以工作：

https://www.webpackbin.com/bins/-KsEA7P7lKOuBugEy1jd

您确定已经安装了所有需要的Babel预设吗？（ES2015，STAGE-0等）

此外，您可以尝试这种方式进行导出：

import _a from './a'
import _b from './b'

export { _a as a, _b as b }

- jony89

---

是的，我知道它应该工作，有时候它能正常工作，有时候突然之间就不行了，这可能与react-native有关.. 我正在使用babel-preset-react-native: 2.1.0。 - Flávio Carvalho

我的另一个导出模块的建议也没有起作用吗？ - jony89

Answer 3

在您的导入文件中，'src'之前缺少'./'。

import * as utils from './src/utils'
// or
import { a, b } from './src/utils'

- Chenxi Yuan

---

我在src文件夹中有一个package.json，它包含以下内容： { "name": "src" }。 - Flávio Carvalho

我认为src文件夹中的package.json文件不会有帮助。如果你想要配置别名，我认为你应该使用webpack别名功能。https://webpack.js.org/configuration/resolve/ - Chenxi Yuan

Answer 4

感谢大家的帮助。 所以我发现有效的方法是：

import a from 'src/utils/a'

正如@loganfsmyth所说，这是因为在我尝试加载a时，utils仍在加载中。但我仍然不确定它是否与react-native模块导入或其他事情有关。

- Flávio Carvalho