帮你捋清前端工程化的那些误区

什么是工程
工程就是一个项目（例如：一个网站或APP）

一个工程的生命周期

1. 工程立项
2. 需求分析
3. 产品原型
4. 开发实施
5. 测试部署
6. 上线运行

什么是工程化

工程化就是完成项目过程中，用到的各种工具和技术

什么是前端工程化

• 前端工程化就是通过各种工具和技术，提升前端开发效率的过程
  • 前端工程化的内容：各种工具和技术
  • 前端工程化的作用：通过使用工具，提升开发效率

前端工程化的萌芽

1. HTML + CSS + JavaScript
2. jQuery
3. Bootstrap
4. 一些列工具与技术。。。

学习前端工程化，就是学习使用各种工具；解决前端开发中的各种问题

前端工程化解决问题

• 项目上线前，压缩代码
• 对ES6+ 或 CSS3 新特性进行转换
• 对 Less 等 CSS 的预编译语言进行编译处理
• 格式化代码
• 一系列问题…

前端工程化包含的内容

• 脚手架工具
  • 专用脚手架
    • vue-cli、create-react-app、angular-cli、gatsby-cli
  • 通用脚手架
    • Yeoman、Plop
• 自动化构建
  • npm scripts & script hooks、Grunt、Gulp、FIS
• 模块化打包
  • webpack、Rollup、Parcel
• 标准化规范
  • ESLint、StyleLint、Prettier
• 自动化测试
  • Mocha、Jest、Enzyme、Cypress、Nightmare、Puppeteer
• 自动化部署
  • Git Hook、Lint-staged、CI/CD

工程化 !== 某个工具