如何在 index.js 桶中导出默认模块

Question

我正在尝试使用 index.js 桶导出默认模块，但似乎无法正常工作。它适用于命名导出但不适用于默认导出。

简化的项目结构

/hellos
  /components
    Hello.js
    Hellos.js
    index.js
  index.js
App.js

/hellos/component/Hellos.js

...
export default Hellos

/hellos/component/index.js

export * from './Hello';
export * from './Hellos';

/hellos/index.js

export * from './components'
export * from './actions'
export * from './constants'
export * from './reducers'

App.js

import Hellos from './hellos'
console.log(Hellos) // <- undefined

刚刚导入的 Hellos 模块始终未定义。

我可以使用命名导出或在 App.js 中直接导入来让它工作，即 import Hellos from './hellos/component/Hellos'，但我认为这是不好的做法，只希望使用 import Hellos from '/hellos'.

我怀疑 index.js 桶有问题，但我无法解决。请帮忙。

Answer 1

使用以下行：

export { default as MyModule } from 'src/MyModule'

希望它能满足您的需求，干杯

Answer 2

对于使用 babel 的用户

在你的 .babelrc:

中像这样使用 babel-plugin-transform-export-extensions 插件

  "plugins": [
    "babel-plugin-transform-export-extensions",
    "transform-es2015-modules-commonjs"
  ]

然后像这样安装插件：

npm install --save-dev babel-plugin-transform-export-extensions
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

然后你可以像这样在 index.js 中使用导出：

export simple from './simple';
export restClient from './jsonServer';
export * from './types';

对于那些使用早期 babel 版本的用户，只需使用 commonjs 模块。

How to export default modules in index.js barrels