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'

它 returns 未定义 "a" 和 "b" 属性，如

utils = { a: undefined, b: undefined }

我不知道我在这里做错了什么，我的猜测是那些 a/b.js 文件没有在它们应该加载的时候加载，我之前做的一个 hack 是在监听函数上，utils.auth，我不得不 if (auth && auth.listener)，这很有效，因为当应用程序启动时，监听器是未定义的，但紧接着它就变成了它应该是的样子。

编辑：看来如果我尝试：

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

export { a, b }

结果是一样的

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''

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 }

Answer 3

在您的导入文件中，您在 'src'

之前缺少“./”

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

Answer 4

谢谢大家的帮助。所以我发现有用的是：

import a from 'src/utils/a'

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

ES6 import/export 未按预期运行

ES6 import/export not behaving as expected

javascript

reactjs

babeljs

react-native

es6-modules