如何使用JavaScript ES模块构建复杂且长尾的代码结构？

本文共计1994个文字，预计阅读时间需要8分钟。

自从ES模块被添加到规范中后，JavaScript中的模块变得更加简单。模块按文件分开，支持异步加载。导出使用`export`关键字定义，值可以通过`import`关键字导入。当然，导入和导出可以仅针对单个值。

自从 ES 模块被添加到规范中后，JavaScript 中的模块就更加简单了。模块按文件分开，异步加载。导出是用 export 关键字定义的；值可以用 import 关键字导入。

虽然导入和导出单个值的基础知识非常容易掌握和使用，但还有许多其他方法可以使用 ES 模块来使你的导入和导出按照你需要的方式工作。在本文中，我将介绍你可以在模块中导出和导入的所有方法。

需要记住的一点是，导出和静态导入只能发生在模块的最外层。你不能从函数、if 语句或任何其他块中导出或静态导入。另外，动态导入可以在函数中完成，我们将在本文最后讨论它。

导出

默认导出

每个模块都有一个 "默认 "导出，它代表了模块导出的主要值。可能会有更多的导出值，但默认导出值代表模块的定义。一个模块中只能有一个默认导出。

const fruitBasket = new FruitBasket() export default fruitBasket

注意，在默认导出之前，我必须先定义该值。如果我想，我也可以立即导出我的值，而不把它分配给一个变量，但这样我就不能在导出的同时将其赋值给一个变量。

我们可以默认导出一个函数声明和一个类声明，而不需要先把它分配给一个变量。