前端星-10：前端工程化浅析

主讲导师：田东东

什么是前端工程化？

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

规范化？

• 版本管理及开发流程规范
• 编写规范
  • 脚本
  • 样式
  • 目录结构

相关技术：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

  

• 自动部署：Jenkins

关于webpack4进行构建时写法的建议？

• 将不同环境的配置进行区分

  

• 集成进来的工具配置单独放置

  

• env配置使用.browserslistrc文件单独放置