乐趣区

关于前端:前端工程化概述

jiezi

软件工程定义：将工程办法系统化地利用到软件开发中

前端倒退历史

前端工程化的倒退历史能够追溯到互联网的晚期阶段，随着前端技术的一直演进和互联网利用的复杂化，前端工程化也逐步成为了前端开发的重要畛域。以下是前端工程化的次要倒退里程碑：

  1. 1995 年，Brendan Eich 创造 Javascript
  2. 2005 年，Ajax(Asynchronous Javascript And XML)广泛应用
  3. 2008 年，V8 引擎公布, 意味着 js 能够脱离浏览器应用
  4. 2009 年，Node.js 公布，标记了前端工程化进入飞跃的时代
  5. 2010 年，Npm 0.1 版本公布标记的模块化的时代到来
  6. 2013 年，Webpack 1.0 版本公布，标记着当初前端开发模式正式造成。
  7. 2013 年，React 1.0 版本公布
  8. 2014 年，Vue1.0 版本公布，标记着前端 MVVM 时代到来

前端开发模式进化过程

前端开发模式经验了多个阶段的演进，以下是前端开发模式的次要进化过程：

  1. 前后端混合(1995\~2005)：服务端渲染，javascript 仅实现交互
  2. 前后端拆散(2005\~2013)：借助 ajax 实现前后端拆散、SPA 等新模式
  3. 模块化开发(2013\~2014)：npm 治理模块、Webpack 编译打包资源
  4. 模块化 +MVVM(2014\~ 至今)：基于 React 或 Vue 开发，不再开发 html，开发 html 成为历史

开发过程中的问题

新近，咱们在开发过程中难免会遇到一些问题：

  • 想要应用 ES6+ 个性，然而兼容性有问题
  • 想要应用 Less/Sass/PostCSS 加强 CSS 的编程性，然而运行环境不能间接反对
  • 想要应用模块化的形式进步我的项目的维护性，但运行环境不能反对
  • 除了下面反对的工作以外，咱们在开发过程中也有重复性的工作，例如部署上线前须要手动压缩代码及资源文件，部署过程须要手动上传代码到服务器。手动会呈现各种各样的工作。
  • 多人合作开发，无奈硬性对立大家的代码格调，从仓库中 pull 回来的代码品质无奈保障，拉回来的代码运行解体。
  • 除了编码问题，在开发局部性能时，须要期待后端服务接口提前完成

以上问题能够看出工程化次要解决的问题次要分为：传统语言或语法的弊病，无奈应用模块化、组件化，重复性的机械式工作，代码格调对立、质量保证，依赖后端服务接口反对，整体依赖后端我的项目。

工程化介绍

前端工程化是应用软件工程的技术和办法来进行前端的开发流程、技术、工具、教训等规范化、标准化，其次要目标为了提高效率和降低成本，即进步开发过程中的开发效率，缩小不必要的反复工作工夫，而前端工程实质上是软件工程的一种，前端工程是指将工程办法系统化地利用到前端开发中，以零碎、谨严、可量化的办法开发、经营、保护前端应用程序，目标是降本提效。

在理论开发的过程中，一个残缺的迭代周期须要顺次通过开发、测试、部署、公布这几个环节，并且在产品上线之后，咱们还须要对产品进行稳定性保障也就是实时的监控和报警零碎，防止产品宕机。那么，工程化须要解决的问题就是如何在整个的迭代周期中降本提效。

工程化的体现是所有以提高效率、降低成本、质量保证为目标的伎俩都属于工程化，所有反复的工作都应自动化。咱们从我的项目的创立、编码、预览、提交、部署这几个环节中，每一个环节都能够用工程化的形式去提高效率。

  • 创立我的项目：应用脚手架工具主动实现根底构造的搭建
  • 编码：借助工程化的工具主动的实现代码的格式化以及格调的校验，从而确保所有开发人员代码格调统一，借助编译工具去应用新的个性进步编码效率
  • 预览：能够借助 Web 服务能运行利用，同时提供热更新、SourceMap 定位问题、Mock 接口的性能
  • 提交：在提交代码之前应用 Git Hooks 和 Lint-staged 实现我的项目代码的查看，确保不会把有问题的代码提交到仓库中。
  • 部署：能够应用脚手架命令实现我的项目的上传，从而代替传统的 ftp 上传形式。还能够实现在代码提交过后自动化的通过继续集成和继续部署的形式，主动将代码部署到服务器中。

工程化不是某个工具，例如 webpack 性能很弱小，然而它并不是工程化。工程化的外围是对我的项目整体的布局、架构，而工具只是帮忙咱们落实工程化的工具和伎俩。

那么咱们应该去选用那些工具来搭配实现工程化的布局呢？咱们能够参考 create-react-app、vue-cli、angular-cli、gatsby-cli 等官网脚手架，它不是一个工具，而是一个成熟的工程化集成计划。以 vue-cli 为例，创立 Vue 我的项目的同时，vue-cli 提供了模板抉择、编译以及本地开发服务器等功能模块。对于应用 vue-cli 创立的 Vue 我的项目，业务开发人员毋庸操心简单的 webpack 配置，只需关注业务逻辑开发自身，这很大水平上升高了开发的工夫老本。

工程化个性

前端工程化能够分成四大个性来说，别离为：

  1. 模块化：将一个文件拆分成多个相互依赖的文件，最初进行对立的打包和加载，这样可能很好的保障高效的多人合作。其中蕴含

    • JS 模块化：CommonJS、AMD、CMD 以及 ES6 Module。
    • CSS 模块化：Sass、Less、Stylus、BEM、CSS Modules 等。其中预处理器和 BEM 都会有的一个问题就是款式笼罩。而 CSS Modules 则是通过 JS 来治理依赖，最大化的联合了 JS 模块化和 CSS 生态，比方 Vue 中的 style scoped。
    • 资源模块化：任何资源都能以模块的模式进行加载，目前大部分我的项目中的文件、CSS、图片等都能间接通过 JS 做对立的依赖关系解决。

  2. 组件化：不同于模块化，模块化是对文件、对代码和资源拆分，而组件化则是对 UI 层面的拆分。

    • 通常，咱们会须要对页面进行拆分，将其拆分成一个一个的整机，而后别离去实现这一个个整机，最初再进行组装。
    • 在咱们的理论业务开发中，对于组件的拆分咱们须要做不同水平的考量，其中次要包含细粒度和通用性这两块的思考。
    • 对于业务组件，你更多须要考量的是针对你负责业务线的一个实用度，即你设计的业务组件是否成为你以后业务的“通用”组件。

  3. 规范化：正所谓无规矩不成方圆，一些好的标准则能很好的帮忙咱们对我的项目进行良好的开发治理。规范化指的是咱们在工程开发初期以及开发期间制订的系列标准，其中又蕴含了：

    • 我的项目目录构造
    • 文档规范化
    • 接口规范化
    • 编码标准：对于编码这块的束缚，个别咱们都会采纳一些强制措施，比方 ESLint、StyleLint 等。
    • 联调标准
    • 文件命名标准
    • 款式治理标准：目前风行的款式治理有 BEM、Sass、Less、Stylus、CSS Modules 等形式。
    • git flow 工作流：其中蕴含分支命名标准、代码合并标准等。
    • 定期 code review
    • … 等等
  4. 自动化：从最早先的 grunt、gulp 等，再到目前的 webpack、parcel。这些自动化工具在自动化合并、构建、打包都能为咱们节俭很多工作。而这些前端自动化其中的一部分，前端自动化还蕴含了继续集成、自动化测试等方方面面。

前端工程化的 3 个阶段

  1. 本地工具链

前端工程化的初级阶段便是将各类工具的性能进行整合，为业务开发人员提供对立标准的工具栈。咱们无妨将此阶段的前端工程化称为本地工具链状态。此状态下的所有工程化功能模块，包含构建、本地服务器、部署等，均在本地环境下工作。

本地工具链状态的工程化计划解决的问题，升高了业务开发人员学习、应用工具的老本。这个计划将简单的性能需要全副交给工具链外部解决，工具链的对立，另一个益处是坚固了流程的规范性，开发者应用对立的工具链、遵循对立的标准进行业务代码的编写，利于多人合作与程序的保护。

  1. 治理平台

本地工具链状态的工程化尽管解决了前端开发以及前后端合作开发中的局部痛点问题，但因为所有的功能模块均在本地环境工作，因而必然会受到环境差异性的影响，比方操作系统类型、版本、内核等。这些因素会在肯定水平上影响构建产出代码的一致性。为此前端工程化进化到下一进化状态：集中管理的云平台。

治理平台状态的工程化做到了以下几点。

  • 淡化环境差异性，保障构建产出的一致性。
  • 权限集中管理，进步安全性。
  • 我的项目版本集中管理，便于危机解决，比方版本回滚等。

治理平台状态将各个功能模块的执行环境集中化，从各模块实现角度来讲与本地工具链基本一致。

  1. 继续集成

即便进化到治理平台状态，前端工程化计划所解决问题的实质依然只是将前端工程师与服务器端工程师的工作解耦。这尽管进步了两方的工作效率，但其各自的工作流却是孤立的。前端有了构建和部署，后端也有了相应的阶段，两方的工作流是拆散的，最终的交融工作依然难以避免繁缛的人工操作。所以前端工程化最终的完满状态，必然与整体工作流联合，作为继续集成计划中的一环。

企业的利用场景

  • 前端工程化贯通整个研发流程，解决 研发流程 中的问题
  • 工程化的外围指标是三点：效率 、 标准 、 性能
  • 只有理解前端研发流程的痛点，能力进行 诊断 和优化
  • 须要站在研发场景的角度去思考 研发流程痛点

企业前端我的项目面临的实在问题

  • 我的项目量级减少：由几千行代码降级到几万行代码
  • 我的项目数量扩充：由几个我的项目扩充到几千个我的项目
  • 我的项目复杂度高：由 Web 我的项目扩大到 H5/PC/ 小程序 /Node 服务端 / 脚手架
  • 团队人数减少：由几个前端扩大到几百个前端

企业前端工程问题解法

  • 我的项目量级减少：通过采纳模块化 (CommonJS 和 ESM) 的形式来将 js 拆分成一个一个的性能，达到多个我的项目复用，通过 npm 和 webpack 辅助实现。
  • 我的项目数量扩充：在大厂中有几千个我的项目，须要通过研发平台和前端研发脚手架来创立、治理我的项目。
  • 我的项目复杂度高：在大厂中不同的团队会用到 vue、react、小程序等技术栈来开发，团队可能针对不同的技术栈开发不同的脚手架，导致反复造轮子，这样咱们要通过工程脚手架 (对立解决不同技术栈的工程差别) 来解决，不论是 vue 或是 react 我的项目，在工程构建流程方面是对立的。
  • 团队人数增长：通过研发平台和研发脚手架来帮忙团队开发人员进行协同工作。

企业前端工程化的利用场景

  • 工程脚手架：应用工程脚手架达到 vue、react 等工程的对立构建
  • 研发脚手架：解决对我的项目的创立、公布以及治理我的项目
  • 我的项目性能优化：对于我的项目的构建速度进行优化

相干文章

  • 如何推动前端团队的基础设施建设
退出移动版