脚手架工具

366 阅读2分钟

「这是我参与11月更文挑战的第16天,活动详情查看:2021最后一次更文挑战

脚手架工具 - 前端工程化的发起者

前言

首先我们需要了解什么是前端工程化?

前端工程化是使用相对应的技术和方法来进行前端的开发流程、技术、工具、编码等规范化、标准化提高效率和降低成本

那我们就先从脚手架开始,去探讨前端工程化在项目创建中的表现

脚手架的本质作用

脚手架就是一个自动帮我们创建一个基础项目的工具(创建项目基础结构、提供项目规范和约定),看似很普通的需求,背后却包含一定的哲学,通常呢我们开发项目的时候,都会有一些约定:

  • 相同的组织结构
  • 相同的开发范式
  • 相同的模块依赖
  • 相同的工具配置
  • 相同的基础代码 那这样意味着我们在进行新项目的开辟时,需要做很多重复的工作,脚手架工作就可以避免这种情况

举个例子

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

但是因为前端技术类型比较多,这里我们针对一些常用的脚手架工具进行一些解析

常用的脚手架工具:

目前市面上有很多成熟的脚手架工具,不过很多脚手架工具都是为特殊的框架进行服务的

  • 适用于特殊框架
    • React项目: create-react-app
    • Vue.js项目: vue-cli
    • Angular项目: angular-cli 这几个脚手架的使用方式都大同小异,无外乎你提供特定的信息,然后脚手架创建对应的项目基础解构,以及相关的一些配置。
  • 通用性脚手架,例如:
    • Yeoman
  • 创建特定类型的脚手架工具,例如:
    • Plop 当我们需要创建一个组件/模块所需要的文件(特定的文件,或由特定解构的时候)使用的

总结

本文我们查看了一些脚手架工具,接下来我们会挑选几个比较有代表性的进行深入探究