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

目录

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

工程化概述

工程化主要解决的问题

  • 想要使用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 同于创建特定类型的文件

脚手架工作原理

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

脚手架工作过程

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

开发一个脚手架

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

你可能感兴趣的:(前端工程化 —— 概述及脚手架工具)