“导出默认自”不适用于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 Component库使用了我上面（export default from './Button'）提到的语法-并且它以某种方式起作用。看起来他们用一些东西babel-plugin-transform-*来做到这一点。

请找到我以找到如何将我的两行导入导出转换为的一行export ... from ...。谢谢。

PS最后，我需要这样做： 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 />

Answer 2

要使用此结构：

export default from './Button';

我们需要使用preset-stage-1。

如何使用

"babel": {
  "presets": [
    "es2015",
    "stage-1",
    "react"
  ]
},