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

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

->

应用程序.js

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

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

我可以使用命名导出或在App.js中直接导入来使其工作，例如： import Hellos from './hellos/component/Hellos' 但我认为这是不好的实践，我只希望使用import Hellos from '/hellos'。

我怀疑问题可能出在index.js中的barrels上，但我无法解决。请帮忙。

- Jon Miles

---

我认为你想要在组件的索引文件中使用类似于export { default as Hello } from './Hello'; 的语句。 - tengbretson

是的，那似乎解决了问题。谢谢。 - Jon Miles

要自动创建index.js，您可以使用https://github.com/gajus/create-index。 - weivall

Answer 1

请使用以下行：

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

希望这符合您的需求，祝福您

- Iban Dominguez Noda

---

如果你的 tsconfig 需要设置 "isolatedModules": true（在某些 React 项目中是强制性的），那么你需要写成 export { type default as MyModule } from 'src/MyModule'。看起来有点奇怪，但可以解决所有问题。 - Froxx

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模块即可。

- Shahbaz Shueb

Answer 3

为了完整起见，也可以先导入它们，然后以导入的名称重新导出它们。

import Something from "./somewhere/whatever";

export { Something };

- Nils