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;

索引.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

看看他们如何从 Breadcrumb 中导出而无需先导入...他们是如何实现的？

Answer 1

如果您检查提供的 example ，你会看到他们使用这个babel plugin .

所以你可以添加一个到你的 babel 插件堆栈。

或者，您可以考虑使用 export {default} from "./destination"; 原样工作的形式。