使用“导出桶”组织模块

这种方法涉及创建一个名为 index.js (或者如果你使用 TypeScript 则为 index.ts) 的文件，在这个文件中，导出该文件夹中存在的所有模块。

举个例子，假设你有一个名为 components 的文件夹，里面包含以下文件：Button.tsx、Icon.tsx 和 Input.tsx。

使用“导出桶”技术，你需要创建一个 index.ts 文件，并添加以下内容：

export * from './Button';
export * from './Icon';
export * from './Input';

这样，当你想在页面或其他模块中使用这些组件时，就可以一次性导入它们：

import { Button, Icon, Input } from '@/components';

这种做法简化了代码组织，提高了维护性，因为你不再需要单独列出每个组件。此外，它使代码更简洁易懂，这在中大型项目中至关重要。

选择 “导出默认” 还是 “命名导出”

当我们深入探讨“导出桶”时，需要注意的是，它可能会与“导出默认”的用法冲突。如果不清楚，我会用示例来说明情况：

让我们回到我们的组件：

tsx

export function Button() {
  return <button>Button</button>;
}
export default Button;

tsx

export function Icon() {
  return <svg>Icon</svg>;
}
export default Icon;

想象一下，每个组件都在一个单独的文件中，你想一次性导入它们。如果你习惯了默认导入，你可能会尝试这样做：

text

import Button from '@/components'
import Icon from '@/components'
import Input from '@/components'

但是，这行不通，因为 JavaScript 无法确定要使用哪个“导出默认”，会导致错误。你只能被迫这样做：

import Button from '@/components/Button';
import Icon from '@/components/Icon';
import Input from '@/components/Input';

然而，这样做就失去了“导出桶”的优势。如何解决这个难题呢？很简单，使用“命名导出”，也就是不使用“default”进行导出：

import { Button, Icon, Input } from '@/components';

与“导出默认”相关的另一个重要问题是重命名你导入的内容的能力

总而言之，强烈建议在大多数情况下使用“命名导出”，只有在绝对必要时才使用“导出默认”。

有些情况下，例如 Next.js 路由和 React.lazy，可能需要使用“导出默认”。但是，在代码清晰度和特定要求的遵守之间取得平衡至关重要。

作者:Long Mo

字数统计:583 字

阅读时长:1 分钟

Long Mo

文章作者：Long Mo