浅谈前端工程化

前端发展简史

石期时代

最初的前端页面都是一些静态页面，人们看到的网页就像报纸一样。

青铜时代

后端为主的时代，往往页面都是后端利用一些模版引擎来完成页面；对于有大量页面的项目，前端在写页面需要构造一定的环境，比如jsp，php等。

铁器时代

随着ajax的诞生，浏览器可以主动从服务端拉取数据，前后端分离的时代到来，SPA应运而生，前端可以处理一些复杂的交互、业务逻辑。

工业时代

随着前端扮演的角色越来越重要，各种SPA框架层出不穷；nodejs的活跃也为前端带来了更有利开发方式以及更多的发展方向。

前端工程化需要做哪些？

代码管理工具

目前来看大多数都是git/svn，当然还是推荐使用git，好处自然不用说。

项目创建、开发、发布

项目创建包含了技术选型，目录结构设计，模块化等。开发中可能会遇到页面适配、样式预处理以及开发便捷性。发布涉及到了代码打包、发布到服务器，你可能还会做一些打包优化等等。

前端自动化工具

对于前端工具这个就很繁杂了，比如图片压缩、开启本地服务代理等等。
当然前端工程化远不止于此，还有单元测试、规范制定等，本文主要梳理开发中最常见的几个环节，看看大家目前的状态是什么样子的？有哪些可以做改进。毕竟茹毛饮血不是我们想要的！

在前端开发中“你”是怎么做的？

项目创建
开发一个项目，首先要创建项目，大概收集了几种方式

copy后修改一下。
git clone -> npm install -> npm start（克隆自己的空项目开发）。
使用框架官方脚手架（vue-cli， Angular-cli，create-react-app），然后再改改。
有自己的脚手架构建器，统一管理（一般是有大牛发力）。
对于前端项目，我们需要做的有很多，比如要适配各种移动端机型，要兼容低版本，想用sass/less，还想用es6甚至是ts，对自己严格要求加个eslint等等，如果你还处于1，2，3情况，那么这些东西每次开发新项目都要重新来一遍，如果你很熟练，可能个把小时就弄好了，否则可能创建项目就要半天。

项目构建
项目构建目前来说基本都是使用webpack，但是其复杂的配置、版本迭代速度让很多开发望而生畏，甚至诞生处理webpack配置工程师（有这个的真牛批?）。
但是我们依然需要开发构建和打包构建能提供一些能里，比如开发热更新，各种预处理，结合性能优化所需要的一些配置（雪碧图，代码分割，压缩，cdn），多页配置，当项目很大的时候我们还需要优化构建速度。突然发现开发完业务功能还有一堆的事情要做，如果没有相关经验积累真是头大。

前端工具
nodejs的盛行给前端开发带来了更多的便捷，各种npm包，node工具。对于工具这一块TJ大神写的 commander.js让我们更加便捷的开发命令式工具，常见的脚手架初始化、代码转化等，真的算是一个神器了。
但是，不得不说，开发还是有一定的技术要求的，注册命令就要写一堆东西，还有参数解析；而且如果我们有多个工具，直接这么来写是很不方便管理的，比如我想查看有哪些是我们自己开发的命令。