javascript - 导出 JS 模块而不先导入它

Question

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

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

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

例如:

菜单.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"; 形式按原样工作。