前端工程化实战-开发脚手架及封装自动化构建工作流＞ 工程化的定义和主要解决的问题- 02-01-01工程化概述

1. 前端工程化定义 和前端开发中遇到的问题

• 定义
  前端工程化是指遵循一定的标准和规范，通过工具去提高效率、降低成本的一种手段
• 日常问题举例
  • 想要使用ES6+新特性，但是兼容有问题
  • 想要使用Less/Sass/PostCSS增强CSS的编程性，但是运行环境不能直接支持
  • 想要使用模块化的方式提高项目的可维护性，但运行环境不能直接支持
  • 部署上线前需要手动压缩代码及资源文件，部署过程需要手动上传代码到服务器
  • 多人协同开发，无法硬性统一大家的代码风格，从仓库中pull回来的代码质量无法保证
  • 部分功能开发时开发时需要等待后端接口的完成
• 主要解决的问题
  • 传统语言或语法的弊端
  • 无法使用模块化/组件化
  • 重复的机械式工作
  • 代码风格统一、质量保险
  • 依赖后端服务接口支持
  • 整体依赖后端项目

2.工程化表现

一切以提高效率、降低成本、质量保证为目的的手段都属于【工程化】

3.工程化 不等于 某个工具

规划一个项目的整体工作流架构

• 文件的组织结构
• 代码的开发范式
• 什么方式做前后端的分离(ajax|| 中间层)
• 提供-编译-构建-打包-测试-HMR等等

一些成熟的工程化集成

• React.js 项目 ----> create-react-app
• Vue.js 项目 ----> vue-cli
• Angular 项目 ----> angular-cli
• gatsby-cli

4.工程化 与 Node.js

工程化工具几乎都是Node.js开发的

总结：接下来主体内容

• 脚手架工具开发
• 自动化构建系统
• 模块化打包
• 项目代码规范
• 自动化部署
等方面落实前端工程化