前端：大家的 API 都是怎么导入导出的？

[tlerbao]

Q:大家通常会选择下面哪种方案，指点一下理由；方案三中普通和箭头哪个更好？

方案一

// 分别导出
export function funA(){}
export function funB(){}
export function funC(){}
...

// 分别导入（按需）
import {funA,funB,...} from 'XX'

方案二

// 分别导出 + 默认导出
export function funA(){}
export function funB(){}
export function funC(){}
...

export default { funA,funB,funC }

// 可默认全部导入也可按需导入
import {funA,funB} from 'XX'
或
import Api from 'xx'
Api.funA...

方案三

// 直接默认导出全部
export default {
    // 普通好？
    funA(){},

    // 箭头好？
    funB: () => {}
}
// 默认导入
import Api from 'XXX'

[tlerbao]

@XCFOX #20 假设 import '../utils' 导入了 format.ts 的全部和 validate.ts 的全部，您的意思，假设我代码中只调用了 format 和 validate 中的部分，那么 vite 在打包的时候会自动 tree shaking ？是这个意思吗？

[lyxxxh2]

几个接口 直接写
十几个接口 方案 3
二十几个接口 方案 1

方案 2: 感觉有点无语 1 和 3 的缝合怪

[CLMan]

这个可以参考 google typescript style guidle ，只需要使用 1 ，不建议使用 2,3 ，也没有什么必须使用 2,3 的场景。

至于上面说的桶文件，其实更多是基于兼容性和习惯（ Deno 作者吐槽为设计错误），并不是说这种设计就是好的。通常情况下，仅限于包级别使用（ src/index.js ）。

如果考虑浏览器兼容，需要 iife 模式（脚本模式），rollup 对 1,2 产生相同的结果，因此也不需要必须使用默认导出。

我也不知道当初 es 是为啥设计默认导出，我一直以来猜测是为了兼容 iife 模式，一个库提供一个全局对象，避免污染 global 作用域。但没有证据能证明我的猜测。

[CLMan]

@CLMan 我翻了下 ECMAScript 的早期相关讨论，终于找到了一个相关文档： https://archives.ecma-international.org/2014/misc/2014misc6.html 。

这个文档证明了我的以上猜测，默认导出设计的初衷就是为了兼容类似 jQuery 这样 ES6 之前的流行的 JS 使用模式（全局单例对象），也确实如文档所说，给当时的 JS 使用者以及后来的 JS/TS 使用者造成了混乱。

这是典型的编程语言设计时因缺乏长远考虑，给后来的使用者带来困扰，后来的使用者还必须得考古才能理解其应用场景，了解语言的缺陷仅为了避免使用该缺陷是当代的编程语言学习者常常面临的情况。

[tlerbao]

@CLMan #24 兄弟，太专业了吧

[SchneeHertz]

function funA(){}
function funB(){}
function funC(){}
...

export default { funA,funB,funC }

import {funA,funB} from 'XX'
// or
import XX from 'XX'

只是习惯

[mark2025]

1. 尽量避免同时使用具名导出和默认导出
2. 推荐统一使用具名导出

[CLMan]

@CLMan 补充下，默认导出目前还是有一些应用场景：

- 使用 JS/TS 作为配置文件，rollup,jest,vite 等框架的配置文件都是采用默认导出

除了以上场景，一般情况下自己的代码都没有必须使用默认导出的必要。

[alleluya]

@CLMan 默认导出这个贺老吐槽过好多回 主要原因就是你回复里说的 语言设计时因缺乏长远考虑 导致后来使用时出现了混乱 和 nodejs 用 cjs 而不是 esm 也有关系吧我记得