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

Posted 2021-02-05 upton

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

前端发展简史

• 石期时代

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

• 青铜时代

后端为主的时代，往往页面都是后端利用一些模版引擎来完成页面；对于有大量页面的项目，前端在写页面需要构造一定的环境，比如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/。