自制简单脚手架

主要流程

• 命令行输入项目信息
  • 技术栈（项目模板）
  • 输入项目其他信息（项目名称、项目地址等等）
• 寻找模板
  • 从github上fetch相关模板仓库
• 复制模板
  • 下载模板文件
  • 对相关内容进行配置（TODO）

如何在终端运行定制的命令

使用Vue官方脚手架创建项目时，在终端敲下vue create app即可创建相关项目。那如何让终端也执行自己定制的命令呢？

实际在执行vue create app命令时，系统将会在node环境下运行相关JS文件，继而执行相关操作。

所以我们需要注册自己的指令到全局并且将该指令映射执行相关JS文件即可。

具体实现就是在package.json文件中添加bin字段。看看官方的解释：

A lot of packages have one or more executable files that they'd like to install into the PATH. npm makes this pretty easy (in fact, it uses this feature to install the "npm" executable.) To use this, supply a bin field in your package.json which is a map of command name to local file name. On install, npm will symlink that file into prefix/bin for global installs, or ./node_modules/.bin/ for local installs. { "bin" : { "myapp" : "./cli.js" } } So, when you install myapp, it'll create a symlink from the cli.js script to /usr/local/bin/myapp.

所以

{
    "bin": {
        "hueng-cli": "cli.js"
    },
}

在开发阶段可以使用yarn link全局注册当前包，这样可以将包中bin指令添加到yarn的全局bin中。

除此之外还需在映射执行文件开头加上

#!/usr/bin/env node

以表示在node环境执行本文件代码

命令行输入信息

需要在终端命令行让用户输入或选择相关信息来使用脚手架，这里使用commander和Inquirer这两个包完成命令行输入的功能。

commander用于处理初始指令

program.command('create').description('创建新项目');
context.name = program.parse(process.argv).args[1] ?? 'hueng-cli-app';

Inquirer用于提示相关输入与选择

inquirer.prompt([
    {
        type: 'input',  // 输入模式 可选 select 以及其他模式
        name: 'description',
        message: '项目描述：',
        default: 'an app create by hueng-cli',
    },
]).then((ans) => {
    // 处理输入
}

所以可以根据输入或选择做出相关差异化操作。例如这里需要选择项目技术栈即选择项目初始模板。

const Templates = {
  'React + React Router + TypeScript + Material UI + Jamstack + Firebase Auth + ESLint + Prettier + Jest + GitHub Actions':
    'kriasoft/react-starter-kit',
  'React 18 + TS + AntD + GitHub Pages + Tailwind + Sass + React Router DOM + ESLint':
    'maifeeulasad/react-pipeline',
  'React 18 + TypeScript + Vite + Redux Toolkit + ESLint + React Router DOM + Axios + React Icons + React Toastify + Express + Mongoose':
    'apicgg/vite-mern-template',
  'React + Vite + TypeScript + ESLint + Prettier': '0x219/template-vite-react',
  'Vue 3.x + Vite 2.x + quasar 2.x starter': 'fyeeme/vite-quasar',
 ...
};

这里根据选择去fetch相应的模板代码文件。

生成模板文件

下载的现有模板带来来自github，可以自己搭一套项目模板放在自己的github仓库，也可以去fetch别人公开的仓库。

这里使用了download-git-repo这个库，download函数传入github用户及仓库名，下载的目标路径，回调函数就能愉快的下载。

download(Templates[ans.stack], process.cwd(), (err) => {
    if (err) {
        console.log(err);
        spinner.fail('...失败！');
        return;
    }
    spinner.succeed('创建成功！');
   // ...
});

大功告成。

此外这里使用了ora库来显示加载动画。

const spinner = ora();
spinner.start('创建项目模块中...');
//...
spinner.succeed('创建成功！');