怎么使用组件库？ 作为一个开发者，通常会用如下方式使用组件库。
-
使用
-
借助构建工具 大部分情况下，前端项目还是基于 npm 安装组件库的包，之后再借助 webpack、vite 或其他构建工具使用组件库。 （当然你也可以不用 npm，直接复制粘贴一把梭~）
所以一个组件库应该构建出什么产物呢？ 有什么构建产物？ 构建产物当然就是 js + css，以及类型声明的 d.ts 文件，但是这些文件的具体格式和组合则有些讲究~
- umd + css + css vars（变量） 适用于直接使用
总结： 优点：兼容性好，无论是 cdn 直接引用，还是作为 npm 包通过构建工具使用皆可。 缺点：代码体积大，无论组件库中有没有被用到代码，通通被引入。可能引起页面性能问题，尤其是在移动端使用。
举个使用 umd 产物，在页面上输出 vue 版本号的例子：
- esm files 适用于使用构建工具的场景。一般不需要输出压缩代码。 在不使用插件的情况下，要想使用 tree-shaking 来减少打包代码的体积，首要前提必须是 esm 格式的源代码。
在这种情况下各个组件都会构建出 esm 格式的 js，并在入口文件中统一导出。
这样在使用组件库时，可以直接 import 用到的组件，随后在打包时会自动将没有用到的组件代码“摇掉”（后文会详细说明）。样式构建产物 a. css files b. css vars files c. less(scss/stylus) files 输出 css 类型的样式，是为了方便直接使用。 若是有其他需求，那么 css vars 和 less 等预编译类型的样式文件可以用于自定义样式。
- esm browser files 适用于直接使用
但与 esm 格式不同的地方在于，构建出的代码需要包含所有依赖包的代码，而 esm 格式的构建产物不用，那些组件库的依赖只需要直接 import 即可。
esm browser 模式有一个缺点是兼容性不好。4. cjs files 适用于不支持 esm 格式的服务端渲染场景。 但随着 Node.js 的版本升级，对于 esm 格式的支持越来越好，之后将渐渐淘汰 cjs 格式的构建产物。
2017-09-12，Node.js 8.5.0 发布了对ECMAScript模块的实验性支持。这种ECMAScript模块的支持是需要在后面加上 --experimental-modules 标识来运行。 Node.js CHANGELOG_V8 2019-11-21，Node.js 13.2.0 起开始正式支持 ES Modules 特性。移除了 --experimental-modules 启动参数。 Node.js CHANGELOG_V13 5. 类型声明文件 *.d.ts 手写编写 例如适配 Vue v2 版本的许多组件库都是手写的类型声明。
自动生成 自动生成的前提就是你的组件库源代码要是用 TypeScript 写的。 随着 ts 的生态越来越好，现在新版本的组件库基本都是用 ts 写的。
如何实现按需加载？ 开发者一般会这么使用组件库，例如希望最后打包的时候只引入使用到的 Button 组件的代码。
import { Button } from 'foo-ui'; babel 插件 在构建工具对于 tree-shaking 支持不好的情况下，一般会安装 babel 插件。曲线救国，间接实现只引入用到的组件。
原理其实就是在 babel 处理源代码的时候，将以上写法转换成直接引用对应组件
import { Button } from 'antd'; ReactDOM.render(xxxx); ↓ ↓ ↓ ↓ ↓ ↓ var _button = require('antd/lib/button'); ReactDOM.render(<_button>xxxx</_button>); 甚至实现样式的按需加载
{ "libraryName": "element-ui", "styleLibraryDirectory": "lib/theme-chalk", }
import { Button } from 'element-ui'; ↓ ↓ ↓ ↓ ↓ ↓ var _button = require('element-ui/lib/button'); require('element-ui/lib/theme-chalk/button'); 但其实除非你用的还是 webpack v1 版本，不然现在构建工具基本都支持 tree-shaking。
js 部分 只要你用的是 import、export 而非 require 来编写组件库。
从 webpack v4 版本开始，通过 package.json 的 "sideEffects" 属性作为标记，向 compiler 提供提示，表明项目中的哪些文件是 "pure(纯正 ES2015 模块)"，由此可以安全地删除文件中未使用的部分。
