前端工程化，你作了多少？

前端工程化是近几年比较热门的一个东西，大大小小的团队也在朝着这一方向发展，那么你的团队作了多少呢？

前端发展简史

• 石期时代

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

• 青铜时代

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

• 铁器时代

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

• 工业时代

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

前端工程化须要作哪些？

• 代码管理工具

目前来看大多数都是git/svn，固然仍是推荐使用git，好处天然不用说。

• 项目建立、开发、发布

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

• 前端自动化工具

对于前端工具这个就很繁杂了，好比图片压缩、开启本地服务代理等等。

固然前端工程化远不止于此，还有单元测试、规范制定等，本文主要梳理开发中最多见的几个环节，看看你们目前的状态是什么样子的？有哪些能够作改进。毕竟茹毛饮血不是咱们想要的！

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

• 项目建立

  开发一个项目，首先要建立项目，大概收集了几种方式
  1. copy后修改一下。
  2. git clone -> npm install -> npm start（克隆本身的空项目开发）。
  3. 使用框架官方脚手架（vue-cli， Angular-cli，create-react-app），而后再改改。
  4. 有本身的脚手架构建器，统一管理（通常是有大牛发力）。
     对于前端项目，咱们须要作的有不少，好比要适配各类移动端机型，要兼容低版本，想用sass/less，还想用es6甚至是ts，对本身严格要求加个eslint等等，若是你还处于1，2，3状况，那么这些东西每次开发新项目都要从新来一遍，若是你很熟练，可能个把小时就弄好了，不然可能建立项目就要半天。

• 项目构建

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

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

适合本身的工做流

上面仅仅是介绍了关于项目开发中的问题，随着前端重要性愈来愈大，工做量也是与日俱增，而前端工程化正是帮助咱们优化流程、减小工做量，所以拥有本身的前端工做流势在必行。
讲了这么多，给你们推荐一个不错的前端工做流工具feflow，利用这个工具，从建立项目到业务开发，再到打包发布，涵盖了整个完整的工做流程。

• 脚手架和构建器
  官方有给出react+redux的脚手架以及基于webpack4的构建器，并且还能够根据官方文档自定义本身的脚手架和构建器，对于不一样的框架和业务均可以完美的接入。
• 插件体系
  此外feflow还提供了丰富的插件体系，你能够自定义各类插件，经过feflow 命令来调用：

feflow.cmd.register('add', '加法运算器', function(args) {
    add(args._);
});
function add (args) {
    const sum = args.reduce((sum, item) => {
        return sum + item
    }, 0)

    console.log(sum)
    return sum
}

# 调用
feflow add 1 2 3
# 输出
 6

是否是很简单，而且命令都是可控的（feflow 控制下）。

结语

无论用什么工具方法，目的都是为了优化工做流程，让咱们轻松高效的完成工做。最后附上feflow官网http://www.feflowjs.org/。