前端工程化与工具链实践

林子杰@zegia

UC优视 导航 前端

项目 15

版本 55

团队 5->12

如何提高效率？

项目多 需求多 版本多 人也多

现象：

开发和生产环境

业务逻辑复杂

新人多、项目交接

需求多，版本迭代快

代码冗余

终端、平台兼容性

BUG 处理困难

……

环境搭建

代码维护性

代码组织管理

移动端调试

浏览器兼容

工程问题：

1. 环境搭建

• 快速搭建开发服务器

• 模拟后端接口

• 模拟生产环境

2. 代码维护性

• 业务逻辑复杂（SPA）

• 多人协作开发

• 代码风格多样

• 项目交接频繁

Code Style Guide

2. 代码维护性

3. 代码组织管理

• 代码模块化

• 代码质量审查

• 模块依赖处理

• 代码混淆压缩

• 文件合并打包

• 前端资源简化

4. 移动端调试

• 远程调试工具

• 日志打印方式

Socket.io + Console

5. 浏览器兼容

• 移动端兼容性

• 积累解决的经验

• 解决问题的效率

• 群体经验贡献

环境搭建

代码维护性

代码组织管理

移动端调试

浏览器兼容工具

规范

框架

ELF

工具链的设计理念开放的、可持续的、高效的、系统的

Q & A