共计 1802 个字符，预计需要花费 5 分钟才能阅读完成。
本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi，蕴含一线大厂面试残缺考点、材料以及我的系列文章。
咱们晓得，JavaScript 模块有两种办法来定义导出：默认导出和命名导出。在本节中，咱们来看下为什么默认导出是一种蹩脚的做法，会导致不好的开发体验。
上面，咱们看下例子，假如，咱们有一个模块，它同时蕴含命名导出和默认导出，如下所示：
export const add = (a, b) => a + b;
export default subtract = (a, b) => a - b;在导入应用之前，这里有一个问题，它可能会影响到咱们的开发体验。为什么 subtract 是默认的，而 add 是一个命名的导出？
ps：我举的例子，可能有点刻意，但随着模块的简单，相似这种状况有常有的
思考到开发人员应用一个他们不相熟且简单的模块。他们可能不晓得默认导出的是什么办法，甚至可能也不确定是否有默认导出。这导致开发者须要花更多的工夫来浏览文档或源码。如果模块只有命名导出，那么应用起来就更加的不便，可读性也会更好。
有了命名导出，应用 IDE，咱们能够很不便的晓得一个模块有哪些办法。那么，这个上面的列表中没有展现什么呢？没错，就是默认导出。记住，默认导出不是命名的导出，所以 IDE 不晓得改默认导出是干嘛的，也就不会在提醒的列表中显示进去：
默认导出的开发体验相似于 Node 中的 CommonJS，它的开发体验也不太敌对。判断代码是否应用 CommonJS 的一个简略办法，就是看有没有应用 require 和 module.exports。
上面咱们再介绍一下，默认导出的一些用法(槽点)：
- 默认导出的名称能够轻易咱们取名。也就是说，减法函数你能够命名成乘法。这会导致凌乱，特地是随着代码复杂度的减少。
import multiply from './math.js';
const result = multiply(2, 2); // results is now 0- 因为默认导出能够用任何名字，并且每个开发者的命名习惯不一样，名称就不一样，这样就没有一致性了。
- 默认导出也不利于重构。在命名导出中，如果哪天咱们的办法名改了，那么 IDE 会提醒咱们对应的办法不存在，咱们能够更好的重构。对于默认导出，IDE 是没有反馈的。
到这里，大家可能有一个问题，如果来自不同模块的两个命名导出具备雷同的名称，该怎么办？
咱们能够应用重命名的形式来解决这个问题：
import {Article} from './types';
import {Article as ArticleComponent} from 'my-design-system';尽管这种形式依然须要为别名想一个名称，但这比为默认导出想一个名称要好得多，因为有命名导出作为参考。
最初，你可能也在想，” 我应用的框架或工具简直要求咱们默认导出一个函数或组件 ”。如果组件很多，咱们能够通过应用 “index.js” 来解决这个问题。就是在目录的根部创立一个 index.js 或index.ts文件，而后应用命名导出这些组件。
比方咱们有一个文件 components，该文件次要搁置咱们封装的组件：
src/
components/
com1/
index.vue
com2/
index.vue那么咱们能够在 components 创立一个 index.js 文件，内容如下：
export {default as Com1} from './com1'
xport {default as Com2} from './com2'这样咱们在其它文件中应用命名导出的形式引入应用：
import {Com1, Com2} from '@/components'如果在写一个模块，无论是代码库还是开源库，尽量少应用默认导出。
就这。
起源：https://www.lloydatkinson.net…
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。