前端工程化初探

前言

目前我所理解的前端工程化, 顾名思义, 就是让前端项目具有工程特性: 知足规范化,流程化,自动化等要求, 随着大前端时代下前端发展的速度愈来愈快, 项目也日渐复杂起来, 前端项目管理也越来庞杂, 形成项目维护性差,开发效率低等弊病吧; 在接手了公司前端业务一段时间后, 也感受存在这些问题, 目前正在尝试将前端工程化这一块作起来...

前端工程按项目阶段划分能够分为: 项目初期构建(这是忽略项目预研,技术选型等,单从工程开发的角度来看); 中期的项目开发; 后期的项目测试,优化以及持续集成和部署. 其实就是某个项目从0到1的过程, 一个约束团队统一行为的过程.

项目构建阶段

项目初期要制定好规范, 用来约束团队人员的开发行为,便于管理,目前想到下面几点;

1.git流程规范

git分支管理: release: 线上发布分支, pre-release: 预发布; dev:开发分支; xxx-dev: 我的开发分支  
commit规范管理: 描述以功能模块为单位进行提交

2.目录结构规范

以vue项目为例, 目前项目都是以vue脚手架进行搭建的,而后在脚手架的基础上进行相关扩展配置; 

1.项目采用 vue + webpack模板; 运行命令 vue init webpack project-name便可, 根据需求选择配置项

2.建立目录和相应文件

2.1-构建目录build, 能够分为测试,预发布,线上三种环境配置,看具体需求

2.2-环境变量配置config, 配置不一样环境下接口,或者其余变量

2.3-项目文档readme, 项目规范及结构概述, 这个比较重要

其余文件夹都大同小异; 都在readme中写出来了, 暂不作概述; 后面会对经常使用的webpack相关配置作一些总结

项目开发阶段

到了开发阶段后, 咱们须要遵照的就是组件化和模块化的开发思想; 按照项目预先制定的规范进行组件化和模块化开发;
好比咱们拿到UI稿图后, 先将页面看做一个大型组件, 而后拆成若干中型组件, 发现相同的地方咱们继续拆成公共的基础组件...这就是组件化开发;
模块化呢? 模块化就是将一个大文件拆分红相互依赖的小文件，再进行统一的拼装和加载。咱们日常使用的ES6模块导入系统以及彻底够用了; 这样咱们能够将js, css, 静态资源等分红不一样模块文件便于管理, 这些通常都会写在项目规范中;
其实这一个过程,我以为更重要是团队成员按照既定的项目规范去落实本身的开发任务...

项目后期阶段

当咱们开发完前端项目, 须要本身进行单元测试, 自动化构建, 部署测试环境,线上环境等等...
像单元测试,自动化构建这些, webpack就能够帮咱们搞定, 不过须要注意一些配置细节; 自动集成部署能够采用gitlab-ci或者jenkins等一类工具来搞定; 会涉及到一些服务器脚本方面的知识;
我这里采用的是gitlab-ci方案;
大体过程是:

1.先到目标服务器注册gitlab-runner服务, 去仓库拿到url和token去服务器register

2.再到项目文件下建立一个gitlab-ci.yml文件, 写上shell脚本; 固然你在注册的时候也以选择docker等其余方式, 
一个简单的脚本示例, 只有构建阶段; 这里面可能还会涉及到服务器目录的一些操做权限问题; 须要chomd修改一下;

这样每一次推送测试分支, 代码会自动在服务器上进行构建,并完成部署发布, 避免手动上传项目带来的麻烦
发布项目还须要咱们去配置web服务器; 这里用的nginx服务器, nginx一些经常使用命令仍是要掌握的

总结一下

前端工程化目前的理解就是: 开发中所制定的一套流程控制和规则,旨在提升开发生产力; 包括了项目搭建, 项目解耦开发, 规范约束, 自动化构建,测试,发布,部署等一系列内容;
后面会把本身遇到的一些问题更新到文章中...