Question

前端开发过程产生的问题

1. ECMAScript（ES）规范与浏览器兼容性不一致：想使用最新的 ECMAScript 规范进行开发，但受限于浏览器实现，需要适配旧规范。
2. CSS 的弱编程能力：想使用 LESS/SASS 等预编译语法或者 PostCSS 自动处理 hack。
3. 资源定位：本地开发静态资源引用的是本地相对路径，上线前需要修改为真实 URL。
4. 考虑产品性能：需要压缩静态资源，图片压缩/BASE64 内嵌/CSS Sprites。
5. 模块依赖分析和压缩打包：模块化开发，提高维护效率。上线前模块需要进行依赖分析和合并打包。
6. 协作层面：前端依赖后端数据
7. 部署层面：静态文件（JS/CSS/图片）与动态文件(HTML 模板) 仍然存在于同一项目，前端部分资源仍然需要后端工程师部署。

说明：针对上面七大问题。前面五大是开发问题。

前端工程化流水线要经过大概四个阶段：脚手架 --> 构建 --> 本地开发服务器 --> 部署

阶段	目的	功能	典型工具
脚手架	快速搭建前端基本环境，以聚焦业务。	包括自动安装、统一工具栈等。	Yeoman
构建	也叫编译。将源代码中转化成宿主浏览器能执行的代码。解决前端七大问题中的开发问题。	解决依赖打包、资源嵌入、文件压缩、HASH 指纹等。构建还包括构建需要解决 3 类问题，分别是语言、优化和部署。	webpack
本地开发服务器	本地服务器最典型的应用是 MOCK 服务，通过模拟接口和数据解决前端 JS 对数据 API 的依赖问题，从而实现前后端并行开发。	MOCK 服务。支持 SSR（服务器端渲染）。动态构建。
部署

表格 构建步骤的前端资源变化

源资源	构建后产出资源	构建动作
领先于浏览器实现的 ECMAScript 规范编写的 JS 代码 ( xx.es )	JS	ECMAScript 规范编转译
LESS/SASS 预编译语法编写的 CSS 代码 (xx.less)	CSS	CSS 预编译语法转译
Jade/EJS/Mustache 等模板语法编写的 HTML 代码 (xx.jade)	html	HTML 模板渲染