export default 被认为是有害的

假如你有一个包含以下内容的 foo.ts 文件:

class Foo {}

export default Foo;

你可能会使用 ES6 语法导入它(在 bar.ts 里):

import Foo from './foo';

这存在一些可维护性的问题:

  • 如果你在 foo.ts 里重构 Foo,在 bar.ts 文件中,它将不会被重新命名;
  • 如果你最终需要从 foo.ts 文件中导出更多有用的信息(在你的很多文件中都存在这种情景),那么你必须兼顾导入语法。

由于这些原因,我推荐在导入时使用简单的 export 与解构的形式,如 foo.ts

export class Foo {}

接着:

import { Foo } from './Foo';

下面,我将会介绍更多的原因。

可发现性差

默认导出的可发现性非常差,你不能智能的辨别一个模块它是否有默认导出。

在使用默认导出时,你什么也没有得到(可能它有默认导出,可能它没有)。

import /* here */ from 'something';

没有默认导出,你可以用以下方式获取智能提示:

import /* here */ 'something';

自动完成

不管你是否了解导出,你都可以在 import { /* here */ } from './foo'here 位置,来了解导出模块的信息。

CommonJS 互用

对于必须使用 const { default } = require('module/foo') 而不是 const { Foo } = require('module/foo') 的 CommonJS 的用户来说,这会是一个糟糕的体验。当你导入一个模块时,你很可能想重命名 default 作为导入的名字。

防止拼写错误

当你在开发时使用 import Foo from './foo' 时,并不会得到有关于拼写的任何错误,其他人可能会这么写 import foo from './foo'

再次导出

再次导出是没必要的,但是在 npm 包的根文件 index 却是很常见。如:import Foo from './foo';export { Foo }(默认导出)VS export * from './foo' (命名导出)。

动态导入

在动态的 import 中,默认导出会以 default 的名字暴露自己,如:

const HighChart = await import('https://code.highcharts.com/js/es-modules/masters/highcharts.src.js');
Highcharts.default.chart('container', { ... }); // Notice `.default`

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

results matching ""

    No results matching ""