“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 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 。

如何使用

1. npm install babel-preset-stage-1 --save-dev
2. 编辑文件package.json并将stage-1添加到babel的presets部分。

package.json示例

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

更多信息

这是对ECMAScript的建议 - https://github.com/leebyron/ecmascript-export-default-from （仍在审核中） 。

Answer 3

只需使用export * from "./Button"; 导出整个模块。 这将有助于您的用例。

不幸的是，没有单行语法只导出另一个模块的默认值。