# 组件库相关知识
# 组件库支持图片构建
# 背景
作为一个业务组件库，组件用到图片的可能性较大，例如默认背景图、logo 等。
最近在开发分享海报（sharePoster）组件的时候，就需要用到一些默认图片。开发的时候一般看的都是文档（storybook），是由 webpack 打包的，默认会处理静态资源，看起来没什么问题。
但是在发布的时候，我们并没有对静态资源的处理，而是保留了图片，构建后的代码也是保留了对图片的引用。
到了业务项目里面就有可能出问题了，我们项目对静态资源的处理很可能是不包含 node_modules 的，这时候就没有 loader 处理组件库对图片的引用了。
# 解决方案
# 方案一
业务项目中，增加对 school-web-ui 组件库静态资源引用的配置。
优点：成本最小。
缺点：
- 需要每个业务都对组件库的静态资源引用进行配置，感觉比较繁琐，
- 不清楚配置的情况下，遇到报错还得排查，浪费时间。
# 方案二
组件库引用图片的时候，全部先上传 cdn，引用 cdn 的地址。
优点：
- 业务无感。
- 减少组件库体积（图片还是比较占空间的）。
缺点：
- 需要提前了解这个约定，如果不知道这个约定，开发的时候没问题，要等到发布后，业务使用的时候才可能出现 bug，有不确定性。
- 引用图片都需要上传，影响开发体验，重复上传还会浪费 cdn 资源。
- cdn 的图片不允许跨站访问，开发环境是 localhost，还需要配置 nginx 跟 host。
# 方案三
组件库增加对图片的构建。
构建流程：
上面由红色框框出来的部分就是组件库在构建的时候增加的流程。
优点：
- 组件库开发无感
- 业务无感
- 减少组件库体积（上传后的图片会被删除）
- 合理利用资源，文件 hash 作为唯一标识，重复引用的资源能得到复用。
缺点：增加构建流程，构建时间变长。