前端工程化

TIP

最后更新时间:2019年10月11日

字数:4578

鄙视不学习的咸鱼

TIP

本章为前端工程化大纲,具体模块笔记连接:

前端模块化和构建工具 参考资料:浅谈前端工程化

前端代码规范

前端部署自动化,这一部分在本网站CentOS笔记部分

前端自动化测试

基础要求

  • JavaScript基础比较扎实
  • 有Vue(React或者Angular) + webpack 实际项目开发经验
  • nodejs基础比较扎实
  • 热爱前端,有深入探究研究前端工程化的决心

前端工程化定义

软件工程

  • 应用计算机科学理论和技术以及工程管理原则和方法,按预算和进度,实现满足用户要求的软件产品的定义、开发、和维护的工程或进行研究的学科

软件工程化

  • 软件工程化关注的是性能、稳定性、可用性、可维护性等方面

前端工程化

  • 前端工程化是使用软件工程的技术和方法来进行前端项目的开发、维护和管理
  • 所有能降低成本,并且能提高效率的事情的总称为工程化
  • 软件工程化关注的是性能、稳定性、可用性、可维护性等方面,一切以这些为目标的工作都是"前端工程化"

为什么需要前端工程化

  • 现在的前端“太大”、“复杂”

    • 也就是说现在的前端不再是原来的html+css+js+jquery简单的写页面的阶段了
    • Web业务日益复杂化和多元化,前端开发已经由以WebPage模式为主转变为以WebApp模式为主了
    • 现在随便找个前端项目,都已经不是过去的拼个页面+搞几个jQuery插件就能完成的了
    • 现在框架越来越多,前端技术越来越复杂,项目越来越多大,急需一套规范来引导它
  • 不再是后端的附属品

    • 现在的前端不在是原来的构建页面了,现在的大前端时代,一个前端可以做的事情太多太多了
    • 包括自动化打包,测试,部署,上线,甚至于后台我们也可以由前端开发人员来编写

前端工程化要解决的问题

要解决前端工程化的问题,可以从两个角度入手:开发和部署。

开发角度

  • 提高开发生产效率
  • 降低维护难度

部署角度

主要问题是资源管理

  • 代码审查
  • 压缩打包
  • 增量更新
  • 单元测试

归类描述

  • 提高前端工程师的开发效率

    • 扩展 javascript 、html、css 本身的语言能力
    • 解决重复工作
    • 模块化、组件化
    • 解决功能复用和变更问题
    • 解决开发和产品环境差异问题
    • 解决发布流程问题
  • 进行高效的多人协作

  • 保证项目的可维护性

  • 提高项目的开发质量

前端工程化发展历程

我们认为前端工程师分为四个阶段,当然也有人认为是三个,完全在于个人理解

第一阶段:库/框架选型

  • Animate.css
  • jQuery
  • vue.js
  • underscore.js
  • React.js
  • Backbone.js
  • Bootstarp
  • zepto.js
  • jade
  • normalize.css
  • compass
  • Angular.js

主要目的就是 解决开发效率

第二阶段:简单构建优化

选择构建工具,对代码进行压缩,校验,之后再以页面为单位进行简单的资源合并

  • grunt
  • gulp

第三阶段:JS/CSS模块化开发

解决CSS和JavaScript在开发中出现的问题

JavaScript的模块化方案

  • AMD
  • CMD
  • UMD
  • ES6 Module

CSS模块化

  • Less
  • Scss
  • Sass
  • Stylus

第四阶段:组件化开发

  • 代表:微信小程序

前端工程化组成部分

  • 前端模块化
  • 前端代码规范
  • 前端自动化
    • 自动化部署
    • 自动化测试
  • 前端构建工具

前端模块化

  • CommandJS(nodejs)
  • AMD
  • CMD
  • UMD
  • ES6 modules
  • webpack
  • parcel
  • rollup

前端代码规范

  • HTML和CSS规范
  • JavaScript代码规范
  • 命名规范
  • 文件命名规程
  • 注册规范
  • 项目文档规范
  • 组件规范
  • 等等

stylelint

  • stylelint 是一个强大和现代的 CSS 审查工具,有助于开发者推行统一的代码规范,避免样式错误。
  • stylelint 由 PostCSS 提供技术支持,所以它也可以理解 PostCSS 解析的语法,比如 SCSS。
  • PostCSS 是一个使用 JS 解析样式的插件集合,它可以用来审查 CSS 代码,也可以增强 CSS 的语法(比如变量和混合宏),还支持未来的 CSS 语法、行内图片等等。
  • 正因为PostCSS解析器,因此stylelint支持SCSSLess以及新SugarSS

eslint

  • ESLint 是一个开源的 JavaScript 代码检查工具,由 Nicholas C. Zakas 于2013年6月创建。
  • ESLint 的初衷是为了让程序员可以创建自己的检测规则。
  • ESLint 的所有规则都被设计成可插入的。
  • ESLint 的默认规则与其他的插件并没有什么区别,规则本身和测试可以依赖于同样的模式。
  • 为了便于人们使用,ESLint 内置了一些规则,当然,你可以在使用过程中自定义规则。
  • ESLint 使用 Node.js 编写,这样既可以有一个快速的运行环境的同时也便于安装。

前端自动化部署

  • pm2
  • forever
  • Linux(推荐学习一下)

TIP

你痛恨的node xxx 运行程序带来的一系列缺点,这里都可以解决

前端构建工具

  • gulp
  • grunt
  • webpack(推荐)

TIP

其实模块化和构建工具很多是可以写在一起的,这里分开来说的

前端自动化测试

  • 黑盒和白盒测试
  • 单元测试
  • 性能测试
  • UI测试
  • 覆盖率测试

TIP

学完就可以帮着测试妹子去做测试了