导出JS模块而不先导入

Question

我的JS组件具有以下结构：

/components
  /Menu
    /Menu.js
    /Menu.test.js
    /index.js
  /MenuItem
    /MenuItem.js
    /MenuItem.test.js
    /index.js

想法是我们可以为每个包含一个测试的组件（以及可能的其他文件）都有一个文件夹，然后，如果我们只想导入该组件，则可以依靠index.js的使用来处理目录导入，而不必直接引用文件夹中的类。

例如：

Menu.js

class Menu extends Component {
  // ... more code ..
}
export default Menu;

index.js

export default from './Menu';

然后它可以像这样使用：

import Menu from './components/Menu';

但是我发现这行不通并且找不到模块...

因此，要解决此问题，我必须在导出之前将Menu导入index.js：

import Menu from './Menu';
export default Menu;

但是查看了其他项目如何构造代码后，我发现他们正在使用前者而不必再次导入...

例如：https://github.com/IBM/carbon-components-react/blob/master/src/components/Breadcrumb/index.js

看看他们是如何从面包屑中导出的，而不必先进行导入...他们是如何实现的？

Answer 1

如果您选中提供的example，则会看到他们使用了 这个babel plugin。

因此您可以在babel插件堆栈中添加一个。

或者，您可以只使用按原样工作的export {default} from "./destination";格式进行调查。