当前位置：首页 > news >正文

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

news 2025/9/30 7:27:29

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

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

初始化项目

npm init -y

在这里插入图片描述

{"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 表明这个文件是可执行的文件

#!/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文件中加入如下的配置

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

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

在这里插入图片描述

action.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

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

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

config.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'}
}