【VUECLI】node.js打造自己的前端cli脚手架工具

都用过vue技术栈的cli工具vue-cli，react的cra脚手架,还有vite是全部技术栈都可以使用工具。方便了我们的项目工程的创建，构建过程。

这里借鉴下我们使用vuecli的过程，初步实现一个自己的脚手架工具

初始化项目

bash 复制代码

npm init -y

json 复制代码

{
  "name": "demo02",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "bin": {
    "mycli": "./bin/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chalk": "^4.0.0",
    "commander": "^14.0.1",
    "download-git-repo": "^3.0.2",
    "inquirer": "^8.2.4",
    "ora": "^5.3.0"
  }
}

创建如下的工程结构

入口文件

bin/index.js

注意在文件的开头使用#!/usr/bin/env node 表明这个文件是可执行的文件

js 复制代码

#!/usr/bin/env node 
const { program } = require('commander');
const myHelp = require('../lib/core/help');
const myCommander = require('../lib/core/commander');

myHelp(program)
myCommander(program)
program.parse(process.argv); // 表示使用 Commander 来处理命令行参数

在 package.json文件中加入如下的配置

js 复制代码

"bin": {
  "mycli": "./bin/index.js"
}

在项目根目录下面，npm link，将mycli挂载到全局,以后在其他地方都可以执行mycli命令

action.js

js 复制代码

const inquirer = require('inquirer');
const config = require("../../config");
const download = require('download-git-repo')
const ora = require('ora')
const chalk = require('chalk')
const myAction = (project, args) => { // 命令行的执行逻辑代码
  inquirer.prompt([{
    type: 'input',
    name: 'name',
    message: 'What is your project name?'
  },{
    type:'list',
    name: 'framework',
    message: 'Which framework do you use?',
    choices: config.framework
  }]).then(answers => {
    console.log(answers)
    const spinner = ora({ color: 'yellow' }).start() // 创建实例并启动加载指示器
    spinner.text = '代码正在下载......' // 下载过程中在命令行展示的 loading 信息
    download(`direct:${config.frameworkUrls[answers.framework]}`, answers.name, { clone: true }, err => {
      if (!err) {
        spinner.succeed('代码下载成功')
        // 下载成功后，提示使用者j接下来可执行的操作
        spinner.succeed('代码下载成功')
        console.log(chalk.green.bold('Done!'), chalk.yellow('you run:\n\n'));
        console.log(chalk.blue.bold('cd ') + chalk.yellow(answers.name));
        console.log(chalk.blue.bold('         npm install\n'));
        console.log(chalk.blue.bold('         npm run dev '));
      } else {
        spinner.fail(chalk.red.bold('代码下载失败'))
      }
    })
  })
}
module.exports = myAction

commader.js

js 复制代码

const myAction = require("./action");

const myCommander = function (program) {
  program
    .command("clone <source> [destination]")
    .description("clone a repository into a newly created directory")
    .action((source, destination) => {
      console.log("clone command called");
    });

  program
    .command("create <appname> [other]")
    .alias("cte")
    .description("create a new project")
    .action(myAction);
};

module.exports = myCommander;

help.js

js 复制代码

const myHelp = function(program){
    program.version('0.0.1')
    program.option('-f --framework <framework>', '设置框架')
}
module.exports = myHelp

config.js

js 复制代码

module.exports = {
  framework: ['express', 'vue', 'react'],
   frameworkUrls: {
    express: 'https://github.com/expressjs/express.git',
    vue: 'https://gitee.com/youlaiorg/vue3-element-admin.git',
    react: 'https://github.com/facebook/react.git'
  }
}

获取版本号
创建项目

在当前文件夹下面就多出了个新项目
项目创建失败

`inquirer报错prompt不是函数的问题`

主要是版本的不适配导致的，整个项目使用的是cjs,所以需要版本降级，参考这里的解决方法https://github.com/bridgewwater/git-tidier/issues/100

如果使用的是es规范，在安装的时候直接使用最新的工具就可以了。