前端工程化,你做了多少?

Posted upton

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端工程化,你做了多少?相关的知识,希望对你有一定的参考价值。

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

前端发展简史

  • 石期时代

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

  • 青铜时代

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

以上是关于前端工程化,你做了多少?的主要内容,如果未能解决你的问题,请参考以下文章

[前端工坊]前端安全篇-shell脚本入门之教你做次小黑客获取某网站用户

你做了哪些事,导致老板下调了对你的评价?

前端开发工程师被疯抢,华为做了什么?

回归 | js实用代码片段的封装与总结(持续更新中...)

如果一个web前端工程师入职一天做多少个页面才正常?

丁洪波 语录