浅谈前端工程化

什么是前端工程化？

目标是解决项目工程开发、测试及维护过程中低效、繁琐的问题。工程化是一种思想，使前端代码规范化、模块化、组件化、自动化。

• 规范化？

• 版本管理及开发流程规范

• 编写规范
  脚本
  样式
  目录结构

相关技术：git(版本管理、代码仓库)、git flow(git行为规范)

• 模块化？

将一般逻辑相关的代码放在同一个文件中，当作一个模块。
优点：只需关注模块内逻辑的实现，无需考虑变量污染等问题，模块间可互相调用

css模块化

核心思想：通过样式生效规则来避免冲突
scoped：DOM节点添加data-v-version属性，通过将.selector变为.selector[data-v-version]来实现
Css in Js：以脚本模式来写样式，通过将样式规则生成唯一的selector来实现。
Css Modules：借助预编译使样式成为脚本中的变量，通过.selector => Object.selector => .main__sub__hash保证样式的唯一标识.
BEM：Block__Element–Modifier规范来编写样式名称，可使用sass可编程css来简化BEM书写格式

js模块化

服务端：commonJs规范,require导入，module.exports导出
浏览器端：ES6 Module-loader规范，import导入，export导出

• 组件化？

核心思想为分治，主要目的为了提高多人协作的效率及代码可维护性。
什么是组件？

UI为主：页面上的一个ui块可以封装成为一个组件。
逻辑为主：某一个功能逻辑封装成一个组件。
样式、脚本、模板封装在一个文件夹中，高内聚、低耦合

• 自动化？

核心思想：能由机器完成的事绝不让人来做。自动化是前端工程化的核心。

自动初始化： vue-cli、angular-cli
自动构建打包：webpack
自动测试：karma、jest
等等…

详细参考：https://juejin.cn/post/6844904134101958664