前端进阶之前端工程化

工程化定义

• 工程化是系统化、模块化、规范化的一个过程.
• 一切以提高效率、降低成本、质量保证为目的的手段都属于「工程化」
• 一切重复的工作都应该被自动化

前端工程化

背景

• 前端项目越来越复杂
• 前端能力越来越强大
• 前端工作越来越重要
• 前端技术发展十分迅速

基于以上几点,以前简单的前端开发流程已经满足不了现在的前端需求了,因此前端必须做出改变,nodejs应运而生,nodejs的出现大大推动了前端工程化的发展.

什么是前端工程化

狭义的前端工程化可以主要分为以下几类:

• 模块化
  • Nodejs
  • npm
  • webpack
• 组件化
  • 微信小程序开发方法
• 规范化
  • eslint
  • stylelint
• 自动化
  • 自动构建
  • 自动测试
  • 自动部署

前端工程化的过程中诞生了很多的辅助工具,例如各大框架的脚手架,以及第三方的一些脚手架等,那前端工程化是不是就等于某个工具呢,答案是否定的,前端工程化是一系列手段和操作的集合,工具只是服务于前端工程化.

前端工程化的具体实现

了解具体实现之前我们需要先了解的前端工作整体流程:

1. 创建项目
2. 编码
3. 预览/测试
4. 代码提交
5. 部署

我们可以在以上每个步骤去实现工程化

• 创建项目阶段
  • 利用脚手架自动完成项目结构的搭建
  • 创建特定类型文件
• 编码阶段
  • 自动代码格式化
  • 代码风格校验
  • 编译/构建/打包(可以使用语言新特性)
• 预览/测试阶段
  • Web Server工具实现热更
  • Mock工具实现接口数据mock
  • Live Reloading/HRM
  • Source Map
• 代码提交阶段
  • Git Hooks
  • Lint-stage
  • 持续集成
• 部署阶段
  • CI/CD
  • 自动发布

前端工程化解决了哪些问题

1. 传统语言或语法的弊端
2. 无法使用模块化/组件化
3. 大量重复机械式的工作
4. 同一项目代码风格多样,质量无法保证
5. 前端功能强依赖后端接口

前端工程化与Node.js

前端工程化的很多工作都依赖于Node.js

• 脚手架工具开发
• 自动化构建系统
• 模块化打包
• 项目代码规范
• 自动化部署

成熟的工程化集成

• create-react-app
• vue-cli
• angular-cli
• gatsby-cli