如何在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就像这样：

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

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