工程化概述

工程化的定义和主要解决的问题

前端工程化指遵循一定的规范，通过工具提升效率，降低成本的一种手段。

前端日常开发遇到的问题

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

工程化主要解决的问题

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

一切重复的工作都应该被自动化

一个项目过程中工程化的表现：

• 创建项目

  • 创建项目结构
  • 创建特定类型文件

• 编码

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

• 预览/测试

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

• 提交

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

• 部署

  • CI / CD
  • 自动发布

工程化不等于某个工具

webpack只是一个工具 ，工具并不是工程化的核心，工程化的核心是对项目整体的规划和架构。工具在这个过程中只是帮我们落地去实现这种规划或架构的一种手段。

前后端分离是基于ajax还是基于中间层做分离；

对于像vue-cli、create-react-app、angular-cli等成熟的集成化工程方案，很多人说这是官方给出的脚手架，其实不是这样的，它们属于特定类型的项目官方给出的集成式工程化方案。

例如vue-cli，它不仅仅帮我们构建了项目，更多的约定了我们vue项目应该是什么样的项目结构，提供了一些工具，使我们可以有热更新服务，自动编译vue单文件组件以及其他模块文件，除此之外还能做一些代码风格校验。这些都是集成在vue-cli中的service中。所以它不仅仅是帮我们创建项目。

所以这些工具可以把它们称为工程化的集成。

工程化与NodeJs

ajax给前端带来了生命力，node对于前端来说除了让JavaScript有了新的舞台，它更多地是让整个前端进行了一次工业革命，没有NodeJs就没有今天的前端，而且在接下来很长一段时间用的工具几乎都是用Node J是开发的，所以前端工程化应该是由Node来驱动的。

工程化是一个庞大的概念，也在不断地成长和发展，接下来在下面几个维度学习如何落实工程化：

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