javascript - "export default from"不适用于 Babel React

Question

我使用 react 来构建我的组件库。我需要一个 index.js 来将所有组件导入一个地方。

像这样:

MyComponents/
  Button.js
  Label.js
  index.js

在 index.js 中，我接下来尝试做的是:

// this export nothing
export {default} from './Button';
// this tells me about syntax error
export default from './Button';

我发现只有这个解决方案有效

import Button from './Button';
export default Button;

但我发现一些 React 组件库使用我上面提到的语法(export default from './Button')——并且它以某种方式工作。看起来他们使用一些 babel-plugin-transform-* 来做到这一点。

请找我了解如何将我的两行 import export 转换为一行 export ... from ...。谢谢。

附言最后我需要这样做:import Button from './MyComponents';

Answer 1

使用以下语法:

File: layouts/index.js

export {default as Flex} from './flex'
export {default as Grid} from './grid'
export {default as Dock} from './dock'

然后就可以使用了

import { Dock, Grid } from 'layouts'

或

import layouts from 'layouts'

<layouts.Flex >...</layouts.Flex>

---

为了导出由上述方法创建的嵌套索引，您可以使用 export * 语法:

File: icons/index.js

export * as action from './action';
export * as alert from './alert';
export * as av from './av';

用法:

import * as icons from 'material/icons'

<icons.action.Close />