避免使用默认导出

你可能已经知道，JavaScript 中有两种共享函数的方式：默认导出和命名导出。默认导出用于从模块导出单个值，而命名导出允许你从模块导出多个值。

当你想从模块中导出特定内容（例如函数或类）时，默认导出非常有用。另一方面，当你想从模块中一次导出多个内容时，命名导出则非常理想。

在本文中，我们将探讨为什么不建议使用默认导出，并且应该避免使用。首先，让我们看一些示例。

命名导出

命名导出的示例如下：



// add.ts
export const add = (a, b) => a + b;

在此示例中，我们导出了一个add从add.ts模块中调用的函数。您可以轻松地使用其名称将此函数导入到另一个模块中：



// app.ts
import { add } from './add';

console.log(add(2, 3));     // 5

让我们使用默认导出重写上面的示例：



// add.ts
const add = (a, b) => a + b;
export default add;

在此示例中，我们将该函数导出为默认导出。之后，我们可以使用任意名称add将该函数导入到其他模块中。



// app.ts
import add from './add';

console.log(add(2, 3));     // 5

现在您已经很好地了解了命名导出和默认导出，让我们深入下一部分来探讨使用默认导出的缺点。

在复杂的模块中，默认导出可能会造成混淆。开发人员可能不知道哪个导出是默认导出，甚至不知道它的存在。这可能会导致开发延迟，因为工程师必须花费更多时间查看文档甚至源代码才能找到所需的功能。

另一方面，使用命名导出使发现变得更加简单。使用命名导出，开发人员可以轻松查看模块的导出成员及其对应的名称。这在使用 IDE 时尤其有用，因为流行的 IDE 允许您使用快捷方式（例如cmd + space）来建议给定文件中的可用函数。遗憾的是，此快捷方式在使用默认导出时不起作用。

如果您决定重命名模块中的命名导出，例如，将函数名称更改add为sum，大多数 IDE 可以自动更新所有用法。这使得重构过程更加容易。

然而，使用默认导出，这是不可能的。

正如我们之前讨论过的，当模块提供命名导出时，我们可以使用 IDE 提供的快捷方式轻松地从模块中选择特定函数。此功能不仅节省时间，还能帮助 IDE 在我们输入时建议并自动导入必要的函数。

例如，如果您开始输入add，IDE 将显示提供该函数的可用包列表add。您只需从列表中选择正确的包，编辑器就会自动为您插入导入。就是这么简单！

默认导出可以使用您选择的任何名称导入。当多个工程师处理同一代码库并使用不同的导入名称时，这可能会导致不一致。



import add from './add';

// Other engineer could use another name
import sum from './add';

在开发 npm 包时，通常的做法是在其入口点导出包函数，入口点通常被命名index.js或者index.ts包是否在 TypeScript 中实现。

为了保持条理，我们经常为不同的函数创建单独的文件，然后在入口文件中重新导出它们。例如，我们可能有名为add.ts和的文件multiply.ts，每个文件都包含一个用于对两个数字进行加法或乘法运算的函数。

如果我们对这些文件使用默认导出，我们需要指定最终包中可用的函数的名称。



// index.ts
export { default as add } from './add';
export { default as multiply } from './multiply';

使用命名导出更加方便：



// index.ts
export { add } from './add';
export { multiply } from './multiply';

如果您想导出所有内容怎么办？这时，通配符导出就派上用场了——它让导出过程更加轻松。



// index.ts

export  from './add';

export  from './multiply';

使用默认导出会使代码查找变得更加困难，并导致不一致。相反，命名导出可以更容易地发现哪些成员被导出以及它们对应的名称，尤其是在使用 IDE 时。

建议避免使用默认导出，尽可能选择命名导出。这样，你的代码库将更有条理、更易于维护，从长远来看也更易于使用。

如果您觉得本系列文章对您有帮助，请在 GitHub 上为本仓库点个星，或在您喜欢的社交网络上分享此文章😍。您的支持对我意义重大！

如果您想要更多类似的有用内容，请随时关注我：