我们知道JavaScript模块有两种定义导出的方式：默认导出和命名导出。在本节中，我们将了解为什么默认导出是一种不好的做法并会导致糟糕的开发体验。接下来，让我们看一个例子。假设我们有一个包含命名导出和默认导出的模块，如下所示：exportconstadd=(a,b)=>a+b;exportdefaultsubtract=(a,b)=>a-b;在导入使用之前，这里有个问题，可能会影响我们的开发体验。为什么减去默认值而添加是命名导出？ps：我举的例子可能有点刻意，但是随着模块的复杂性，开发者使用一个自己不熟悉，复杂的模块是常有的事。他们可能不知道默认导出的是什么方法，甚至不确定有没有默认导出。这导致开发人员花费更多时间阅读文档或源代码。如果模块只有命名导出，使用起来会更方便，可读性更好。通过命名导出，使用IDE，我们可以很容易地知道一个模块有哪些方法。那么，下面的列表中没有显示什么？没错，默认是导出的。记住，默认导出不是命名导出，所以IDE不知道默认导出是做什么用的，所以不会显示在提示列表中：默认导出的开发体验类似于Node中的CommonJS，其开发体验也不太友好。判断代码是否使用CommonJS的一种简单方法是使用require和module.exports。下面介绍一下默认导出的一些用法（槽）：默认导出的名称可以随意命名。换句话说，您可以将减法函数命名为乘法。这可能会导致混乱，尤其是当代码复杂性增加时。从'./math.js'导入乘法；常量结果=乘法(2,2);//resultsnowis0由于默认导出可以使用任意名称，而且每个开发者的命名习惯不同，名称也不一样，所以没有一致性。默认导出也不利于重构。命名导出，如果哪天我们的方法名改了，IDE会提示我们对应的方法不存在，我们可以更好的重构。对于默认导出，IDE没有任何反馈。说到这里，你可能会有疑问，如果来自不同模块的两个命名导出具有相同的名称怎么办？我们可以使用重命名来解决这个问题：import{Article}from'./types';从“我的设计系统”中导入{ArticleasArticleComponent}；虽然这种方法仍然需要为别名想一个名字，但它比试图为默认导出想一个名字要好得多，因为有命名的导出作为参考。最后，您可能还会想，“我使用的框架或工具几乎需要我们默认导出一个功能或组件”。如果组件比较多，我们可以使用“index.js”来解决这个问题。只需在目录的根目录下创建一个index.js或index.ts文件，然后使用命名导出这些组件。比如我们有一个文件components，里面主要放我们打包好的组件：src/components/com1/index.vuecom2/index.vue那么我们可以在components中创建一个index.js文件，内容如下：export{defaultasCom1}from'./com1'xport{defaultasCom2}from'./com2'这样我们就可以在其他文件中使用namedexport来导入使用：import{Com1,Com2}from'@/components'如果你正在编写一个模块，无论是代码库还是开源库，尽可能少地使用默认导出。
