前端工程化

前段时间给同事们做了一次技术分享《前端工程化》,我总觉得全程讲的磕磕巴巴的，感觉没有把精髓同步给小伙伴们，虽然他们都说我讲很好，还可以之类的，但是一次分享的重点和精髓没有传达到位的话，那我觉得应该是失败的。

强迫症患者又上线了，把之前的讲义再梳理下，下次有机会分享就可以讲的再透彻一些了

什么是前端工程化

概念

狭义上的理解：将开发阶段的代码发布到生产环境，包含：
1、构建
2、分支管理
3、自动化测试
4、部署

广义上理解：前端工程化应该包含从编码开始到发布，运行和维护阶段

意义

内容

四个维度

组件化

特别是对于我们这些做sass平台的互联网公司，一站式解决“人、财、物、事”数字化难题，做的都是类似于OA办公系统的管理平台，每个页面长的都差不多，
太需要一些组件块，拼接成工厂模板的页面了，这样就像搭积木一样，随意组装就可以快速的出页面，实现一键搭建网站的初衷

从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。
组件化≠模块化。模块化只是在文件层面上，对代码或资源的拆分；而组件化是在设计层面上，对UI（用户界面）的拆分。

1、 FormFactory 纯表单渲染 扩展按钮(查询、重置、开票等)
2、TableFactory 纯表格渲染列表分页等功能、支持tag分标签下的表格展示
3、FooterBar 底部悬浮Button(提交、下一步、取消等)
4、DescriptionFactory 详情页面的字段展示列表
5、SectionHeader 头部描述title，以及扩展按钮(新增、导出、下载等)
6、TabsList标签页组件

模块化

模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载

Webpack

webpack是一个现代JS应用程序的静态模块打包工具，将项目当作一个整体，通过一个给定的主文件，webpack将从这个文件开始找到你项目所有的依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件

入口(entry)

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。

输出(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件

loader

loader 让 webpack 能够去处理那些非JS文件,毕竟webapck和浏览器只认识解析js

loader有两个属性
1、test属性：识别出哪些文件会被转换
2、use属性：定义出在进行转换时，使用哪个loader

插件(plugins)

plugins可以打包优化，资源管理，注入环境变量。想要使用一个插件

常见的plugins:

点击查看更多webpack官网

JS模块化

CSS模块化

资源模块化

规范化

规范化其实是工程化中很重要的一个部分，项目初期规范制定的好坏会直接影响到后期的开发质量。

比如：

• 目录结构的制定：有助于提高项目的逻辑结构合理性
  
• git分支管理
• 文档规范、命名规范
• JS、CSS规范
• 前后端接口规范、响应格式封装(axios拦截器)
• 编码规范：制定一套良好的编码规范可以增强团队开发协作、提高代码质量。
• code review机制

人家京东凹凸实验室开源了一套前端规范的网站，想了解端规范细则的可以点击查看前端代码规范

自动化

• 图标合并
• 持续集成(jenkins/docker/now/github)
• 自动化构建
• 自动化部署
• 自动化测试

四个阶段

1、库/框架选型

市面上主流的框架主要是react和vue，之前我整理了自身使用过的一些框架以及使用体验，（React/Vue/Next/Umi）框架对比

2、简单构建优化

（Grunt/gulp/webpack）选择一种构建工具，对代码进行压缩，校验，之后再以页面为单位进行简单的资源合并，说实话我只使用过webpack，所以也不敢对其他的构建工具指指点点，哈哈

3、JS/CSS模块化开发

JS模块化方案很多，AMD/CommonJS/UMD/ES6 Module等

4、组件化开发、静态资源管理

封装页面模板组件、静态资源CDN服务器

以上就是前端工程化的一些见解，最近又发现了一个大佬的博客，他的博客里详细的讲解了前端工程化的相关内容，超级赞，点击查看更多前端工程化三十八讲