前端工程化就是指遵循一定的标准和规范，通过工具去提高效率、降低成本的一种手段

[刀耕火种]的年代面临的问题

  • 想要使用ES6+新特性，但是兼容有问题
  • 想要使用Less/Sass/PostCSS增强CSS的编程性，但是运行环境不能直接支持
  • 想要使用模块化的方式提高项目的可维护性，但运行环境不能直接支持
  • 部署上线前需要手动压缩代码及资源文件，部署过程中需要手动上传代码到服务端
  • 多人协同开发，无法硬性统一大家的代码风格，从仓库中pull回来的代码质量无法保证
  • 部分功能开发时需要等待后端服务接口提前完成

技术就是为了解决问题而存在的

前端工程化主要解决的问题

  • 传统语言或语法的弊端
  • 无法使用模块化/组件化
  • 重复的机械劳动
  • 代码风格统一、质量保证
  • 整体依赖后端项目

工程化表现

一切以提高效率、降低成本、质量保证为目的的手段都属于[工程化] 一切重复的工作都应该被自动化

  • 创建项目
    • 使用脚手架工具，自动帮我们完成基础结构的搭建
    • 创建项目结构
    • 创建特定类型文件

  • 编码

    • 格式化代码
    • 校验代码风格
    • 编译/构建/打包

      借助工程化的工具，自动帮我们完成一些代码格式化以及代码风格的校验，从而确保每一个开发人员写出的代码都是相同的风格。使用编译工具让我们在开发阶段使用新的特性，提高我们代码编码的效率。

  • 预览/测试

    • Web Server / Mock
    • Live Reloading / HMR
    • Source Map

      借助于现代化的Web Server，提供热更新的体验，热更新就是我们在编码完成之后，就可以直接在浏览器看到最终的执行结果，不用自己手动去刷新。 借助Source Map工具，编译过程中，可以对出现的问题进行定位

  • 提交

    • Git Hooks
    • Lint-staged
    • 持续集成

      Git Hooks——自动化的在项目提交之前，对项目进行整体的检查，包括项目质量的检查，以及代码风格的检查，确保不会把有问题的代码提交到仓库中，对提交日志也可以有严格的限制。

  • 部署

    • CI / CD
    • 自动发布

      可以用一行命令代替传统的CD。 还可以在代码提交后，自动化的通过持续集成或持续部署的方式，自动将我们的代码部署到服务器，避免了手动操作产生的不稳定的因素。

工程化不等于某个工具

工具不是工程化的核心，工程化的核心应该是对整体项目的一种规划或者架构，工具只是用来帮我们实现这种规划或架构的一种手段

工程化与Node.js

前端工程化是由Node.js去提供的

内容概要

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