本文为作者在青训营学习过程中所记录的笔记。
构建工具的对比分析
Webpack 与 Glup / Grunt 的区别是什么？
其实 Webpack 和另外两个并没有太多的可比性。
- Gulp / Grunt 是一种能够优化前端的开发流程的工具，而 WebPack 是一种模块化的解决方案，不过 Webpack 的优点使得 Webpack 在很多场景下可以替代 Gulp / Grunt 类的工具
- Gulp / Grunt 是基于任务和流的（Task、Stream）。类似于 jQuery 的链式函数的写法，通过一系列链式操作，更新流上的数据，整条链式操作构成了一个任务，多个任务就构成了整个网页应用的构建流程
- Grunt 和 Gulp 的工作方式是：在一个配置文件中，指明对某些文件进行类似编译、组合、压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
- Webpack 是基于入口的。Webpack 会递归解析入口所需要加载的所有资源文件，然后用不同的 Loader 处理不同类型的文件，用 Plugin 扩展 Webpack 的功能。
- Webpack 的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack 将从这个文件开始找到你的项目的所有依赖文件，使用 loaders 处理它们，最后打包为一个（或多个）浏览器可识别的 JavaScript 文件。
三者都是前端构建工具，Grunt 和 Gulp 在早期比较流行，现在 Webpack 相对来说比较主流，不过一些轻量化的任务还是会用 Gulp 来处理，比如单独打包 CSS 文件等。
Webpack
Loader
Webpack通过Loader打包JS,CSS等文件。
Plugin
通过配置Plugin，可以配置Webpack识别的文件类型。
组件库设计与开发
接口定义
为组件定义接口类型时，应继承原生DOM或基础组件属性，避免属性遗漏或重复声明
类名前缀统一
组件使用特殊且统一的类名前缀，尽量降低与用户类名冲突的可能性
避免行内样式和CSS Modules
确保外部可通过类名进行样式覆盖
避免在JS中直接引入样式文件
应尽量保证逻辑与样式的分离，确保用户可以分别引入JS和CSS文件，避免由于构建环境的不同导致的用户编译失败的问题
注意组件样式的按需加载
在基于基础组件库如Arco进行业务组件的逻辑封装时，应注意按需引入所依赖的Acro基础组件的样式文件
