php脚手架,从零开始搭建自己的前端脚手架（一）

前言

日常开发中，我们都只专注在业务上的开发，拿起一套开箱即用的模板项目就直接开搞了，不知道大家有没有思考过，平时我们使用的脚手架里面到底做了什么，并且如果是自己来搭一套脚手架，应该怎么去搭呢？

在本博客中，将记录作者搭建脚手架的过程，整体将分为两个部分，第一部分是cli的搭建，第二部分是模板项目的搭建；

cli的搭建

在搭建脚手架cli之前，我们首先思考一下，一个cli，需要什么能力呢？答案是初始化能力，那么初始化的功能需要怎样去实现呢，这里，我们先梳理一下思路。

思路

我们在使用其他cli时，会发现，它们有问询的功能，比如询问项目名称，项目描述等；然后还可以选择模板项目将要使用什么css预处理器等的问题；所以，cli首先就要具备问询功能，用以获取定制化信息；

问询结束后，我们的cli会获得即将创建的项目的基本信息，接下来我们就需要以一个模板项目作为模板去创建，模板项目将会在第二部分讲解，这里一笔带过~；OK，既然有了模板项目，cli就需要下载这个项目，然后复制这个项目，同时将前面问询所得的定制化信息写入项目配置中，所以cli还需要有下载和复制，写入模板功能；

到此，一个模板项目基本已经创建成功了，那后面我们还希望脚手架可以帮忙进行git初始化以及安装依赖的功能，所以最终，还需要添加git初始化和安装依赖的功能；

总结一下，实现一个cli的初始化功能我们需要有如下能力：

问询 ==> 下载模板 ==> 复制，写入模板 ==> git初始化 ==> 安装依赖

准备

好了，为了实现上述思路，cli将会引入如下依赖去实现对应的功能：

const program = require('commander'); // commander负责读取命令

const inquirer = require('inquirer'); // inquirer负责问询

const download = require('download-git-repo'); // download-git-repo负责下载对应模板项目的git仓库

const fse = require('fs-extra'); // fs-extra负责文件的复制

const memFs = require('mem-fs');

const editor = require('mem-fs-editor'); // mem-fs-editor负责模板的复制以及嵌入模板字符串，它需要依赖mem-fs

const { exec } = require('child_process'); // child_process负责执行命令行

当然除了上述必须的依赖外，为了更好的交互体验，还引入了如下依赖：

const chalk = require('chalk'); // 改变命令行输出样式

const ora = require('ora'); // 一个优雅地命令行交互spinner

至此，准备的工作已经完毕，下面，就开始一步步来编写cli了

cli的编写

万事开头难，有了思路后，实现思路才是真正的开始，下面将介绍如何组织cli项目

项目组织

首先看一下，工程的组织

├── bin

| ├── begin

| ├── begin-init

├── src

| ├── constants.js

| ├── project.js

| └── utils.js

├── .gitignore

├── .npmrc

├── README.md

└── package.json

第一步，解析命令

在bin/begin中引入commander，并且声明init命令，commander会在同级目录中寻找begin-init文件

const program = require('commander');

program

.usage(' [options]')

.command('init [name]', 'init a project')

.parse(process.argv);

第二步，问询

有了第一步的解析后，我们可以在begin-init文件中编写创建逻辑，这里，我们再抽象project文件到src目录底下，以便更好地分离职责，bin文件只负责解析命令就好啦~

下面就看看project文件中，如何实现问询

inquirer.prompt([{

type: 'input',

name: 'projectName',

message: '请输入项目名：',

validate(input) {

if (!input) {

return '项目名不能为空';

}

if (fse.existsSync(input)) {

return '当前目录已存在同名项目，请更换项目名';

}

return true;

}

}]);

inquirer提供prompt函数来实现问询，其参数为数组，问询顺序将按照数组的顺序来进行；

第三步，下载仓库

在问询结束后，我们基本知道需要创建的项目的名称、描述等信息了，下一步，就是下载仓库了，下面我们来看看核心代码：

const downloadPath = path.join(projectPath, '__download__');

download(TEMPLATE_GIT_REPO, downloadPath, { clone: true }, (err) => {

// 拷贝

// 此处省略若干代码

// 拷贝完成后删除临时文件

fse.remove(downloadPath);

}

这里需要注意的是，模板工程所在的仓库，即TEMPLATE_GIT_REPO，最好是public的

第四步，复制文件，将信息写入模板

下载仓库只是把模板工程存放在一个临时文件夹内，真正的工程文件需要等信息写入模板后再生成；

这里需要注意的是，模板写入时遵循ejs规范

const memFs = require('mem-fs');

const editor = require('mem-fs-editor');

// 这里需要mem-fs进行内存优化

const store = memFs.create();

this.memFsEditor = editor.create(store);

// 这里source表示源文件，dest表示目标文件，data表示需要写入的数据

this.memFsEditor.copyTpl(

source,

dest,

data

);

在调用copyTpl时，data字段中的key-value将被写入到模板中，举个栗子：

// 模板文件中，字段是这样的

{

name: ""

}

// data就要这样去写

{

projectName: 'this is your project name'

}

第五步，进行git init和npm install

这两步的核心都是使用nodejs提供的child_process中exec方法去执行命令来实现，exec能帮助我们在命令行中执行shell命令，exec函数有对应的回调方法来让我们判断命令执行是否成功，核心代码如下：

exec('npm install', (error, stdout, stderr) => {

if (error) {

// 出错了

} else {

// 成功了

}

})

是不是很简单呢，想了解更多的操作可以搜索官方文档查看哈，这里就不详解了。

调试和发布

到这里，我们的cli已经实现的差不多了，这里我们总结一下如何测试和发布吧

npm link // 本地调试

npm publish // 发布

通过npm link命令，即可以在命令行工具测试你的cli了，注意在package.json的bin字段中定义好入口命令和文件

// package.json

{

"bin": {

"begin": "bin/begin"

}

}

小结

OK，文章主要总结了编写一个脚手架中init功能的思路以及一些实现的方法，具体一些细节仍有优化的空间，欢迎大家讨论！

文章的具体代码可以参考我的仓库begin-cli