前端工程化

如何提高前端工程师的开发效率变得非常重要。这就是前端工程化所要解决的问题

前端工程化需要解决以下问题：

• 规范性，文本编辑器很方便，但语法提示，风格检查会迫使你去将自己的IDE打造起来的。

• 资源管理，前端最头疼的事情，所幸我们有Webpack！

• 自动化任务，debug、build、deploy、test、documentation等。

• 模块化开发，划分好模块总是便于团队协作，使软件逻辑清晰。

• 组件化开发，也许你想说这是框架负责的，实际上前端工程化的支持才是最重要的。

任何一个软件工程大致上分为以上三步: 开发 -> 测试 -> 部署上线。

具体到前端工程中，每一步又涵盖了很多细节。
开发阶段 - 前端三剑客为HTML, CSS和Javascript，运行环境为浏览器。但是大家在开发的过程中感觉原生的HTML, CSS和Javascript效率并不高，于是出现了模板，SCSS，Coffeescript/Typescript等中间型语言用于转义为原生的语言(ES6也属于这类情况)，所以应提供相关的构建工具用于转义。再者，在开发过程中，开发者希望在编码时，能够立马在浏览器中反应出变化，这又要求了自动刷新。同时在开发中，还面临过着JS依赖管理，性能优化等方面的问题。
测试阶段 - 前端本质上属于GUI的一种，所以不可避免的要有E2E(End to End Test)和保证功能的单元测试，测试的过程理应自动化，开发者只需要写出相应的测试用例，剩下的交给工程化框架去自动执行并反馈给开发者结果。
部署阶段 - 我相信没有任何一个前端工程师会傻逼到将开发后的代码直接推到线上，当你使用Chrome开发者工具去看别人的网站时，一般都是压缩过的代码。部署时候代码的组织形式肯定与开发时有很大的差异，例如从优化的角度上来说，要对代码进行压缩，静态资源部署到静态服务器上，对文件加上md5防止浏览器使用旧缓存等。关于部署的问题，大家可以参考张云龙的经典博文: 大公司是怎么开发和部署代码。