前端工程化探讨

惠学洁 / @leohxj

主要内容

• 什么是前端工程化
• 如何构建前端工程化
• 前端工程化具体分析
• 工作计划与分配

什么是前端工程化？

前端的困惑

• 开发过程逐渐繁琐
• 代码零碎缺乏规范
• 开发经验缺乏沉淀
• 技术发展与迭代太快
• 给人感觉技术含量低
• ...

前端的解决过程

• 库和框架
• 简单的构建优化
• JS/CSS模块化
• 工程化/集成解决方案

我的理解是:把项目进行抽象，通过技术手段，将开发的各个环节串联起来，以提高开发效率和维护成本。

如何构建前端工程化?

前端涉及的技术元素

八大技术元素

• 开发规范
• 模块化开发
• 组建化开发
• 组件仓库
• 性能优化
• 项目部署
• 开发流程
• 工程工具

"以上8项，1-3是技术和业务相关的开发需求，4是技术沉淀与共享需求，5-8是工程优化需求。"

需要考虑的内在联系

• 模块化开发涉及到性能优化、对构建工具又有一定的配套实现要求，也会影响开发规范的定制
• 组件化开发应该基于模块化框架来加载其他依赖的组件
• 组件仓库中的组件都应该按照相同的标准来实现，否则下载的组件不具有可复用性、可移植性，就是去了仓库的意义
• 考虑开发规范工具是否能很容易的实现，如果部署上有特殊要求，工具是否能很容易的做出调整，而不是修改规范
• 工具是否能提供接入公司已有流程中的接口，比如命令调用，如果工具需要一些系统环境支持，公司的ci流程中是否能支持等问题

前端工程化具体分析

我们需要解决什么?

• 开发流程与规范
• js/css文件模块化开发
• 功能模块组建化开发
• 工程工具： 开发与调试
• 工程工具： 构建与优化
• 静态资源与组件管理

开发流程与规范

• 与设计师，产品经理合理沟通
• 图片处理流程
• 约定工程结构和编码规范
• 维护技术文档和bug记录
• 开发工具与插件配置（不做硬性要求）

js/css文件模块化开发

• AMD/CMD/ES6 Modules
• TypeScript/ES6
• LESS/SASS
• PostCSS
• 方便工具进行模块构建

功能模块组建化开发

• 依赖模块化加载
• 通过版本控制
• 通过配置文件管理
• 数据绑定，减少DOM操作

工程工具： 开发与调试

• 项目生成与依赖安装
• 开启web服务器
• 开发过程的自动化编译与刷新
• 浏览器调试数据的模拟

工程工具： 构建与优化

• 项目的静态资源构建
• 代码的压缩与合并等优化
• 方便与后台开发人员代码的对接
• 构建选项可配置
• 与开发过程形成一个整体的命令行工具

静态资源与组件管理

• 缓存控制与文件指纹
• 资源请求合并
• 模块／组件的按需加载/webpack
• 可学习fis，使用资源表

工作计划与分配

工作计划

• 每周能找机会相互沟通一下进度与想法
• 3-4周后出一个版本
• 利用alpha版本，开发一个项目主页
• 开发过程迭代和修改需求
• 后续再考虑和java模版层的进一步融合

THE END

谢谢！