为何Ant Design这类React组件库要同时提供打包产物和转译产物？

最近我在分析Ant Design这类知名React组件库时，发现了一个不太理解的问题。

以上是node_modules中antd的目录结构。

可以看到目录内存在打包后的文件。

同时也存在转译后的文件。

当我使用如下方式从antd导入组件时：

import {Button} from "antd"

实际引入的组件来自转译后的文件。我想询问的是，既然组件都取自转译文件，那么存放打包产物的dist文件夹的作用是什么？

回答 #

antd 的 dist 文件夹主要服务于非现代模块化开发的各类场景，和你日常开发用到的转译后单文件产物是互补关系，核心作用有以下几个：

• 支持无构建工具的浏览器直接引入
  如果你要快速写 demo、或者维护没有接入 webpack/vite 这类构建工具的老旧项目，不需要 npm 安装，直接通过 script 标签引入 dist 目录下的antd.min.js和配套 css 即可使用，引入后全局会暴露antd对象，直接调用antd.Button就能拿到对应组件，省去了依赖安装、构建转译的步骤。
• 提供多规范全量包兼容
  dist 目录下的产物一般会同时兼容 UMD、AMD、CommonJS 等多种模块规范，适配不同的运行环境和构建工具。部分特殊场景（比如低代码平台需要预加载全量组件、老旧构建工具不支持 node_modules 路径解析）下，直接引入 dist 下的全量包即可正常使用，不需要额外做兼容配置。
• 适配离线/私有化部署场景
  有些项目不允许访问外网 npm 源，也不需要做按需引入优化，直接把 dist 目录下的静态文件拷贝到项目中就能直接用，不需要处理依赖解析、组件转译等流程，部署成本更低。
• 作为 Tree Shaking 不完善场景的兜底
  如果你的项目构建工具的 Tree Shaking 配置有问题，全量引入 antd 时直接用 dist 下已经压缩过的全量产物，比引入所有转译后的单文件再打包出来的体积小很多，能有效减少最终包的大小。

你日常开发用import { Button } from 'antd'走转译后的单文件，是因为现代构建工具会优先读取 package.json 里module或者exports字段指定的 ES 模块路径，支持 Tree Shaking 剔除未使用的组件，是现在前端工程的最佳实践，所以平时很少感知到 dist 文件夹的存在。

内容的提问来源于stack exchange，提问作者Lee Jongseo