面临的问题

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

主要解决的问题

  • 传统语言或语法的弊端
  • 无法使用模块化/组件化
  • 重复的机械式工作
  • 代码风格统一、质量保证
  • 依赖后端服务接口支持
  • 整体依赖后端项目

工程化表现

  • 一切以提高效率、降低成本、质量保证为目的的手段都属于「工程化」
  • 一切重复的工作都应该被自动化
  • 工程化≠某个工具,工程化的核心是对项目整体的架构,而工具仅仅只是落地实现的手段

image.png

成熟的工程化集成:

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

对应特定类型的项目,官方给定的集成式工程化方案

工程化与Node.js

Powered by Node.js

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