cjl-df.github.io

前段项目工程化简介

什么是工程化

说起工程化，一般来说我们都是指一些比较大，比较复杂的东西。对于这些东西的处理，我们要按照一定的步骤，一定的规范来做，使之系统化，模块化，规范化；这样对于我们要做的东西，就会变得系统性、计划性、周密性、完整性、可维护；

前段项目为什么要工程化

自然是因为前段项目变得越来越复杂，变得越来越庞大。

现在大多的交互逻辑都交给了前段处理，后端只负责提供数据服务，而且用户的交互也变得越来越复杂，自然导致前段项目变得越来越庞大；

不管是以前纯手动写JS脚本，或者使用jquery,都不能在支持前段项目的规模；所以就出来很多框架，angular,react,vue等。

交互逻辑变得复杂，项目变得越来越庞大，实现起来越来越困难，使我们不得不将前段项目工程化，使之系统化（也就是整个开发流程）、模块化（易于管理，开发）、规范化（易于维护）

前段项目工程化都涉及到那些

• 项目流程规范化

  现在接到前段项目，我们不再是盲目的上去就写代码，而是要按照一定的流程，去实现需求

  • 需求分析

    我们接到需求后，应该要首先分析需求，这是项目开发的管理，前段人员应该要参与进来，明白整个需求 （应形成需求文档）

  • 交互分析，设计分析

    我们要对交互稿详细分析，每个步骤，每个用户的动作等应该明确明了；对设计稿尽心详细分析，明确每一个地方展示数据的来源，每一个展示的细节如何处理，都应该明确明了 （应形成交互文档，设计文档）

  • 开发阶段

    • 这儿我们要对项目版本，迭代进行管理（工具自然是git、svn）
    • 要制定代码开发规范（应有代码规范文档），并使用专门的代码规范检查工具（eslint）
    • 对于函数式变成，我们要做好单元测试；对于模块化，我们要做好模块测试
    • 打包部署（grunt ， gulp，webpack， rollup）

  • 测试阶段

    我们要给测试单独部署

  • 预发布 我们应如何将前段资源分别部署到开发环境，测试环境，以及预防环境和正式环境

  • 发布 正式发布上线
    

• 项目模块化、组件化 我们前段资源一般都会打包未静态资源，分为图片，js,css,这些都会在html里面引用到

  这儿我们提到的主要是js模块化，前段项目一般是es6module(commonjs,amd规范，以及cmd模块规范)

  可能的话还会有scss,less等预编译等模块

  或者也可以说项目中的model,view,controler也属于模块化，在或者现在对model蹭的细分

  可能的话还会有自己的组件库

• 项目规范化，以及提高效率

  这些前面其实已经提到了，对于规范化，我们要前段规范文档；并且用专门的规范检查；

  对于如何提高效率，应该是我们前段如何部署，如何发布，如何热加载，热部署等过程 这些都在流程规范化中提到过