前端工程化 — 一键式构建企业级通用模板的脚手架方案随着前端工程化的理念不断深入，我们会更多的选择使用脚手架从零到一搭建

背景

什么是脚手架？其实核心功能就是创建项目初始文件,那问题又来了,市面上的脚手架不够用？为什么还要自己写？只要提到脚手架你就会想到，vue-cli、create-react-app...他们的特点不用多说那就是专一！但是在公司中你会发现有以下一系列的问题：

业务类型多
多次造轮子，项目升级等问题
公司代码规范,无法统一
... 很多时候我们开发时需要新建项目，把已有的项目代码复制一遍，保留基础能力。但是这个过程非常琐碎而又耗时。那我们可以自己定制化模板，自己实现一个属于自己的脚手架。来解决这些问题。随着近几年前端工程化的理念不断深入，我们会更多的选择使用脚手架从零到一搭建自己的项目。大家熟悉的create-react-app和vue-cli,它们可以帮助我们初始化配置生成项目结构、自动安装依赖，最后我们一行指令可运行项目开始开发，或者进行项目构建(build)。这些脚手架提供的都是普遍意义上的最佳实践，但是实际开发中发现，随着业务的不断发展，必然会出现需要针对业务开发的实际情况来进行调整。例如：
通过调整相关插件与配置实现打包后的性能优化
项目架构调整、编码风格
用户权限控制
融合公司的基建
... 总而言之，随着业务发展我们往往需要沉淀并制作出一套更“个性化”的业务方案。这时候我们最直接的做法就是开发出一个该方案的脚手架来，以便今后能复用这些最佳实践与方案

1. 脚手架整体架构设计与基本流程

微信截图_20220515221226.png 如上图所示，是一个完整的脚手架npm包结构图，我们想要通过发布该npm包之后，通过全局 npm install -g bst_cli 安装该包之后，可以通过执行类似bst init templateName的命令初始化直接拉取生成我们需要的项目工程模板，力图做的直接上手开发，免去项目开始初期的架构设计和初始模块的开发成本。通过这种方式我们只需要致力于优化同一个模板，该模板可以应用于各个项目开发中。下面我们将通过设计流程来解释的两个命令 bst init templateName和 bst initVue tempalteName 的主要工作原理。

1.1 `bst init templateName`命令流程设计：

如上图所示，我们将通用模板上传到github,通过 download-git-repo 组件来请求并拉取github 上的项目到本地，这个过程通过本地nodejs脚本执行脚本命令来执行。

1.2 `bst initVue templateName`命令流程设计：

微信截图_20220515224218.png 如上图所示，由于很多情况下对于git 的API 请求受限制于网络环境，很容易拉取模板失败。因此我们将模板文件直接集成在npm包中，执行命令时候实现本地拉取。

在脚手架开发过程中我们需要引入一些特定的第三方库来实现脚本执行的相关效果：

库名	描述和作用
commander	处理控制台命令
chalk	控制台的效果显示
inquirer	控制台询问
download-git-repo	git远程仓库拉取
ora	命令行环境的loading效果

2. 前端模板脚手架 bst_cli 功能介绍

上图是我当前新写的一个前端脚手架npm发布包源码，已经发布www.npmjs.com/package/bst…, 当前版本功能还比较简单，只做了基础的模板配置，通过全局安装该包：npm install -g bst_cli ,有以下commander 命令对应不同的功能：

commander 命令	功能描述
bst init xxx(模板名)	初始化生成一个比较完整的前端项目工程，该工程封装了基本的编译打包、登陆权限、路由权限等
bst create xxx(模板名)	生成一个可选的前端模板（包括各种组件 vue 、vue-router、vuex 等）
bst initVue xxx(模板名)	为了解决github网络请求不通的问题，通过 nodejs 脚本实现了从仓库本地文件中直接拉取 vue 的一个前端通用模板
bst --version	查看当前包的版本
bst --help	帮助指令

对于该脚手架的整个源码实现可以通过我的文章：juejin.cn/post/698321… 来具体了解，此处我就不再展开，我们现通过一系列的操作命令来看下能达到一个什么效果：