前端技术的飞快发展带来了很多问题，前端工程化就是要来解决这些问题的

  • 前端工程化主要解决的问题：
    1. 传统语言或语法的弊端
    2. 无法使用模块化、组件化
    3. 重复的机械式工作
    4. 代码风格统一、质量保证
    5. 依赖后端服务接口支持
    6. 整体依赖后端项目
  • 工程化的表现
    • 创建项目过程中可以利用脚手架工具创建项目结构以及特定类型的文件
    • 编码阶段
      • 格式化代码
      • 校验代码风格
      • 编译/构建/打包
    • 预览/测试阶段
      • Web Server/ Mock
      • Live Reloading/ HMR
      • Source Map
    • 提交代码阶段
      • Git Hooks
      • Lint-staged
      • 持续集成
    • 部署阶段
      • CI / CD
      • 自动发布
  • 工程化 ≠ 某个工具

工程化图示.png

  • 工程化与NodeJS
    • nodejs的出现推动了工程化的发展，nodejs是前端工程化的根本。

脚手架工具

创建项目基础结构、提供项目规范和约定

  • 解决创建项目时的重复性工作：
    1. 每个项目中相同的组织结构
    2. 相同的开发范式
    3. 相同的模块依赖
    4. 相同的工具配置
    5. 相同的基础代码
  • 常用的脚手架工具
    • React项目中使用create-react-app
    • Vue项目中使用vue-cli
    • Angular项目中使用angular-cli
    • 通用型项目脚手架-Yeoman
    • Plop 项目中创建特定的结构的文件