啥？常用的 export 居然有坑？

导出是大家常用的语法吧，比如说：

export const test = () => {}
export default const test = () => {}
export default () => {}

以上三种写法都是没问题的，但是如果我们使用第三种写法导出一些代码时，很可能会遇到一些意料之外的坑。

首先我们导出了一个匿名函数，如果在运行该函数的过程中报错了，那么我们很难在 Devtools 展示出来的调用栈中了解到底是哪个函数出了问题，报错信息不会很直观。我相信大家肯定遇到过报错信息最后个调用栈是匿名函数的情况。

LHgpeY

因此如果不是必须得这样写的话，我们还是尽可能使用非匿名的导出方式，也就是多写了几个字，但是能避免一些不必要的 debug 麻烦。

另外我们也可以通过 ESLint 来解决这个问题，只需要使用 eslint-plugin-import^[1] 插件即可。

这个插件可以通过一些配置来提示有问题的代码位置：

"import/no-anonymous-default-export": ["error", {
  "allowArray": false,
  "allowArrowFunction": false,
  "allowAnonymousClass": false,
  "allowAnonymousFunction": false,
  "allowCallExpression": true, // The true value here is for backward compatibility
  "allowLiteral": false,
  "allowObject": false
}]

通过以上配置，我们再写以下类似代码的时候就会直接报错：

export default []

export default () => {}

export default class {}

export default function () {}

引用链接

[1] eslint-plugin-import: https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-anonymous-default-export.md

快手前端正急缺人才，如果你想加入我们，欢迎加我微信和我联系。另外如果你想加入高质量前端交流群，或者你有任何其他事情想和我交流也可以扫码添加我微信 。

文中如有错误，欢迎在留言区和我留言，如果这篇文章帮助到了你，欢迎点赞、在看和关注。你的点赞、在看和关注是对我最大的支持！

关注公众号后，在首页：

回复资料，高级前端进阶指南、10 万字面试指南等各类资料。

回复1，进入高级前端进阶群。