作者：@gauseen背景前端技术发展日新月异，各种技术层出不穷。已经不是只有切图+jQuery+CSS就能走遍天下的时代了。因此，Web应用的复杂度越来越高，出现问题的概率也越来越大。如何解决多人协同高效开发？如何保证项目的可维护性？如何高质量交付任务？成为每个前端开发工程师值得思考的问题。为了解决以上问题，大佬们引入了前端工程的概念。什么是前端工程，将前端开发流程标准化、规范化、自动化。前端工程项目脚手架项目脚手架在新建项目时只需敲几行命令即可生成初始化代码，直接进行页面级开发。让开发更专注于业务逻辑层，而不是各种配置项。比如vue-cli脚手架，一键快速搭建Vue.js应用开发环境。我还开发了一个非常方便学习的脚手架feseed-cli，目前支持的模板源码可以在这里找到。这样就可以根据公司的业务提炼出一个基本的项目模板。当需要启动一个新项目时，敲几行命令即可，提高了开发效率，统一了公司前端项目技术栈和开发规范。任何重复和规则的构造工具编码都可以通过程序解决。该构建工具大大提高了开发效率，解放了重复劳动，如：压缩、打包、单元测试等操作，增强了前端开发的可玩性。在前端工程中，构建工具似乎扮演着“管理者”的角色。工程中的一系列标准化、标准化、自动化，都需要借助施工工具来实现。常用的构建工具如下：webpack：模块打包器，主要用于打包JavaScript文件，更好用在浏览器中，webpack可以对任何资源进行转换、捆绑、打包（v4.0支持零配置），常用作web应用developmentparcel：快速、零配置的web应用程序打包器rollup：JavaScript的模块打包器，提倡使用标准化的ESM规范而不是CommonJS、AMD、CMD进行编码。Gulp常用于工具库开发：它是任务运行器的流式构建系统。它在功能上类似于grunt。其特点是以流方式编写任务代码。Gulp的流实现允许每个任务并行运行。让它比grunt快很多grunt:taskrunners（任务运行器）构建工具，grunt中的每个任务都是一系列不同的插件配置，这些插件按照一定的顺序依次执行browserify:类似于webpack，可以使用require('modules')浏览器语法打包工具，就像node环境pikapkg/web中引用资源一样：安装npm依赖，在浏览器运行。无需Browserify，WebpackJavaScript模块化ES6之前没有模块系统，无法将大的js应用拆分成小的模块，开发和维护都非常不方便。例如：require('module')可以在nodejs中使用。为了解决这个问题，大牛定制了一些模块化的方案，大致可以分为以下几类：AMD（AsynchronousModuleDefinition）：异步模块定义，依赖于前面的requirejs：AMD规范的代表作CMD（CommonModuleDefinition）：通用模块定义，延迟执行，后依赖内置支持ESM（ECMAScriptModule）模块系统，具有以下特点：借鉴了AMD和CommonJS规范的优点，支持异步加载，延迟加载语法是比CommonJS更紧凑，可以对结构进行静态分析（用于静态检查，优化等）循环依赖比CommonJS更好的支持代码规范每个人的代码风格都不一样，虽然我们提倡多样性，但是在一个团队中，同一个项目有不同的代码风格，那是一场灾难。不利于项目的后期维护，新人熟悉项目成本高。因此，我们需要共同商量。根据大家的开发习惯，有两种统一的代码开发规范。一种是HTML、css、js原生开发规范，js常用的有standard（推荐）和eslint规范，css常用stylelint（推荐）、csslint规范，HTML对具体规范要求相对不高另一种，根据具体框架（如：vue、react）、一些开发规范Specification在使用vue-cli脚手架初始化项目时，会有相关的js规范配置选项。这里我推荐标准规格。因为标准规范有一个更好的特性，不需要配置，是史上最方便的统一代码风格的方式。这样可以为团队节省大量浪费在制定规范上的时间，让开发不必纠结于代码规范，可以专注于代码设计和开发。当然萝卜白菜各有喜好，也有很多大公司推出的规范也可以使用，比如：AirbnbJavaScriptStyleGuide、TencentAlloyteamcodespecification等。为了更具体地展示如何合作withgithooksandenforcecodespecifications，我写了一篇文章Usinggithookstodetectjscodestandard(eslint,standard)，详细讲解了如何在项目中从零开始配置js规范。我们也参考了很多规范文章，针对具体框架（vue.js）的编码规范做了很多讨论。从目录规范到具体的开发细节，都有明确的规定。有关详细信息，请参阅此处的版本控制(Git)。Git是一个非常有用的代码版本控制工具。在团队协作的过程中，也会衍生出一些使用规范，帮助我们提高开发效率和质量。保证项目分支图（Graph）的简洁性约定统一的提交信息（CommitMessage）为什么要保证项目分支图的简洁性？我们要达到的目标是，任何一个新人，在看到项目提交记录的分支图时，都能知道项目迭代的大概流程，有助于项目的理解和管理。分支图中简洁的重要性比较如下：如下图所示，commit分支图错综复杂，根本看不到任何有意义的信息。如何实现提交信息分支图等操作的简单性？对于一个新的需求，只需要建立一个分支，多个开发者可以在同一个分支上进行开发。提交前，先用gitpull--rebase，再用gitpush推送到远程。对gitrebase感到困惑，禁用gitpush-fteamleader，开发完成后将各个子分支合并到主分支。每次部署新版本，都必须更新master分支，并在最新的commit处创建一个新的tag来标记当前应用版本行出现bug时，基于master分支，创建一个新的hotfix——xxx分支来处理这个bug。为什么要约定统一的提交信息（CommitMessage）？如果每个开发者都按照自己的意愿来提交消息，那么整个项目的提交历史将很难区分提交的是哪一方面。又看到提交信息是123456！！因此，我们需要CommitMessage规范来限制开发者提交信息的多样性，提高GitCommitMessage的可读性。规范也有很多种，这里推荐conventional-changelog/commitlint规范，也被很多知名项目使用。Mock数据前后端分开开发是很常见的。为了提高开发效率，前后端并行开发，mock数据（虚假数据）已经是不可避免的问题。对于前端来说，mock数据的方式有很多种：Mock.js模拟数据生成器需要前端手动编写mock数据代码，比较麻烦。每个项目都要有一套mock代码，复用率底层没有GUI可视化界面。方便后端开发查看接口、字段等API信息。easy-mock是一个可视化、持久化的服务，可以快速生成模拟数据。支持可视化界面。支持协同编辑。支持swagger，可以基于swagger快速创建项目接口。支持Mock.js语法支持界面预览等免费开源，私有化，部署简单阿里妈妈第一代、二代开源界面管理工具RAP出品的RAP和RAP2RAP支持可视化界面支持协同编辑支持Mock.js语法不支持swagger数据导入，但支持JSON格式数据的导入导出，免费开源，但私有化部署相对繁琐YApi是一个可视化界面管理平台，可以本地部署，连接前端和QA，支持可视化界面，支持协同编辑，支持自动化测试，断言Response基于Json5和Mockjs定义了界面返回数据的结构和文档。支持swagger、postman、json、har数据导入，免费开源。私有化部署并不简单。我推荐YApi平台。测试的种类很多单元测试（UnitTest）：针对功能或模块的测试集成测试（IntegrationTest）：针对产品整体的某个功能进行测试，也称为功能测试端到端测试（EndtoEndTest）：从用户界面到数据库的全链路测试对于基础模块，比如常用方法工具库，需要做单元测试对于稳定的核心业务，比如支付系统，营销系统，需要做测试对于非核心业务，功能不是稳定的部分，不建议开发自动化测试用例。编写测试用例是浪费时间。有时候刚写完，需求变了，需要重写测试，也是浪费人力。比较常用的测试工具有：jestmochaavavue-test-utilsVue.js官方单元测试实用库在线部署前，发布新版本时，手动发布代码，效率低，出错概率高。现在，使用Jenkins实现自动化构建、测试和部署，大大提高了发布效率，降低了错误率。错误监控和错误监控工具如下：Sentry：开源免费，跨平台的应用监控，专注于报错FunDebug：付费应用实时监控服务ARMS（阿里出品）：付费在线错误监控，是一款applicationpublishedonline最后一部分很重要，方便预警、统计、跟踪、故障排除、bug重现。欢迎收看无广告文章公众号：从淘宝前端工程演进学前端参考，看工程之路如何“私人定制”什么是持续集成？廖雪峰Git教程NPMvs.Bowervs.Browserifyvs.Gulpvs.Gruntvs.Webpack
