前端工程化 —— 概述及脚手架工具

目录

• 工程化概述
  • 工程化主要解决的问题
  • 工程化的表现
  • 工程化 != 某个工具
  • 一些成熟的工程化集成
• 脚手架工具
  • 脚手架的本质作用
  • 常用的脚手架工具
  • 脚手架工作原理
  • 脚手架工作过程
  • 开发一个脚手架

工程化概述

工程化主要解决的问题

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

工程化的表现

• 创建项目 （使用脚手架完成基础工具的搭建）
• 编码（代码格式化、代码风格校验，编译工具可以将使用的新特性自动编译可运行的语言）
• 预览/测试（Web Server/Mock前端服务器、Live Reloading/HMR热更新、Source Map定位源代码位置）
• 提交（Git Hooks代码整体质量检查、Lint-staged代码风格检查，持续集成）
• 部署（CI/CD、自动发布）

工程化 != 某个工具

工具不是工程化的核心。工程化的核心是对项目整体的规划和架构。而工具只是帮我们实现规划和架构的一种手段。

以一个普通的项目为例，规划一个项目整体的工作流架构，包括规划文件的组织结构，源代码的开发范式、通过什么方式进行前后端分离。这些确定之后再考虑用那些工具，实现我们对整个项目的整体规划。

一些成熟的工程化集成

下面创建的并不只是项目，还有一些目录规范、集成工具等其他的工程化解决方案。

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

前端工程化是由node.js强力驱动的，Node.js居于首功。

脚手架工具

脚手架的本质作用

创建项目基础结构、提供项目规范和约定（相同的组织结构、开发范式、模块依赖、工具配置，更有一些基础代码都相同）

IDE创建项目的过程就是一个脚手架的工作流程

常用的脚手架工具

• React项目 —— create-react-app
• Vue项目 —— vue-cli
• Angular项目 —— angular-cli
• Yeoman 通用脚手架工具
• Plop 同于创建特定类型的文件

脚手架工作原理

脚手架工具就是一个node的CLI应用，创建脚手架就是创建一个CLI应用。在启动过后，会自动询问预设的问题，根据回答的结果根据一些模板文件，生成一个项目结构。

脚手架工作过程

• 通过命令行交互询问用户问题(node中发起交互命令我们使用inquirer模块)
• 根据用户回答的结果生成文件（入口文件中进行逻辑实现）

开发一个脚手架

手把手教你如何开发一个简单的脚手架