Node学习第二章-创建脚手架工具

2024-06-04 05:36

本文主要是介绍Node学习第二章-创建脚手架工具,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

开发脚手架工具

脚手架是个工具,通过输入命令创建项目初始化代码文件。

脚手架工具的特点:1.指令执行 2.可交互 3.初始化项目构架。

创建脚手架工具教学

主要步骤:

  1. 创建自定义指令
  2. 接受命令参数
  3. 设计终端交互
  4. 模块化抽离
  5. 下载远程代码
  6. 项目初始化完成提示

1. 创建全局指令

  1. 创建项目文件夹,并且在文件中新建名称为bin子文件夹,然后在bin文件夹中创建文件cli.js文件。这样做的目的是我们后续生成package.json文件时,会自动配置我们的指令。当作我们的一个全局命令入口。
  2. 终端输入:npm init 初始化脚手架信息。输入脚手架的名称,之后的配置信息默认即可。初始化结束之后,生成package.json文件,“mycli"就是我的脚手架名称,“bin”, 配置的是命令程序入口。
    在这里插入图片描述
  3. 编写cli.js程序
    首先终端使用指令:npm link 将指令全局挂载。然后在cli.js文件中代码首行配置,指令运行环境。
    在这里插入图片描述

2 接受命令参数

  1. 获取命令参数
    终端输入 mycli --help, cli.js 文件中打印这个help入参。
console.log(process.argv[2]);

在这里插入图片描述
2. 引入第三方包,处理指令参数。commander。npm install commander。commander。

// 引入commader
const {program} = require('commander');
program.parse(process.argv);

控制台 输入mycli --help, 可以看到控制提示,已经有默认的help指令。
自定义指令(“’–framwork‘ ’别名 -f‘ ’参数‘”, ‘指令说明’)

const {program} = require('commander');
program.option('-f --framwork <framwork>', '设置框架');
program.parse(process.argv);
  1. 使用commander处理自定义命令参数。
    通过.command()或.addCommand()可以配置命令,有两种实现方式:为命令绑定处理函数,或者将命令单独写成一个可执行文件。
// 第一个参数为命令名称,命令参数可以跟在名称后面,也可以用.argument()单独指定。参数可为必选的(尖括号表示)、可选的(方括号表示)或变长参数(点号表示,如果使用,只能是最后一个参数)
program.command('create <project> [destination...]' ) // 设置指令,指令
.alias('crt') // 别名
.description('创建项目') // 命令说明 自动在help生成
.action((project, args)=>{// 命令行的执行逻辑代码console.log('参数', project, args)
})
program.parse(process.argv);

3 设计终端交互

  1. npm install inquirer
  2. 代码
var inquirer = require('inquirer');
inquirer.prompt([{type: 'input',name: 'username',message: '你的名字'}
]).then((answer)=>{console.log(answer)
})
  1. 在使用中可能会提示require 不能用,建议降低inquirer的版本,npm i inquirer@8.2.0 。

4. 模块化抽离

创建lib文件夹,然后在lib中创建子文件夹core, 其中创建JS脚本,存放主要的逻辑代码。
help.js

const myhelp = function(program){program.option('-f --framwork <framwork>', '设置框架');
}
module.exports = myhelp;

command.js

const myAction = require('../core/action')
var command = (program)=>{program.command('create <project> [destination...]' ) // 设置指令,指令.alias('crt') // 别名.description('创建项目') // 命令说明 自动在help生成.action((project, args)=>{// 命令行的执行逻辑代码myAction(project, args)})
}
module.exports = command;

action.js

var inquirer = require('inquirer');
var config = require('../../config')
const myAction = (project, args)=>{// 命令行的执行逻辑代码console.log('参数', project, args)inquirer.prompt([{type: 'list',name: 'framwork',choices: config.framwork,message: '请选择你使用的框架'}]).then((answer)=>{console.log(answer)})
}
module.exports = myAction;

最后集成到bin/cli.js

#! /Users/shishuai/.nvm/versions/node/v17.0.1/bin/node
const {program} = require('commander');
const myhelp = require('../lib/core/help');
myhelp(program);
const command = require('../lib/core/command');
command(program)
program.parse(process.argv);

5 下载远程代码

项目中引入下载插件,并且在action.js中,通过用户的选择“模版”的指令,下载对应的文件。

  1. 引入插件 npm install download-git-repo
  2. 抽离下载方法,创建download.js
const download = require('download-git-repo');
const downloadFun = function(url, project) {download('direct:'+url, project,{clone:true},(err)=>{console.log(err)})
}
module.exports = downloadFun;
  1. config.js中配置不同选择项的下载路径
module.exports = {// 可选择的框架framwork:['express','koa', 'egg'],// 框架的下载地址framworkUrl:{express:'https://github.com/expressjs/express.git',koa:'https://github.com/koajs/koa.git',egg:'https://gitee.com/mirrors/eggjs.git'}
}
  1. action.js 引入使用, 核心代码展示
// 远程下载
var downloadFun = require('./download');
const myAction = async (project, args)=>{// 命令行的执行逻辑代码console.log('参数', project, args)const answer = await inquirer.prompt([{type: 'list',name: 'framwork',choices: config.framwork,message: '请选择你使用的框架'}])downloadFun(config.framworkUrl[answer.framwork],project)console.log(answer)
}
  1. 优化下载,加入laoding 动画, 加入不同的颜色字体
    引入插件 npm install ora@5。 优化动画
    引入插件 npm install chalk。优化字体

    使用插件

    
    const ora = require('ora')
    const chalk = require('chalk')
    const downloadFun = function (url, project) {const spinner = ora().start()spinner.text = '代码正在下载……'download('direct:' + url, project, { clone: true }, (err) => {if (!err) {spinner.succeed('代码下载成功')console.log(chalk.blue.bold('Done!'), chalk.bold('you run:'));console.log('cd ' + project);console.log('npm install ');console.log('npm run dev ');} else {spinner.fail('代码下载失败')}})
    }
    

这篇关于Node学习第二章-创建脚手架工具的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1029198

相关文章

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压:数据存储与传输的优化核心1. zip/unzip:通用压缩格式的便捷操作2.

sqlite3 命令行工具使用指南

《sqlite3命令行工具使用指南》本文系统介绍sqlite3CLI的启动、数据库操作、元数据查询、数据导入导出及输出格式化命令,涵盖文件管理、备份恢复、性能统计等实用功能,并说明命令分类、SQL语... 目录一、启动与退出二、数据库与文件操作三、元数据查询四、数据操作与导入导出五、查询输出格式化六、实用功

python如何创建等差数列

《python如何创建等差数列》:本文主要介绍python如何创建等差数列的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python创建等差数列例题运行代码回车输出结果总结python创建等差数列import numpy as np x=int(in

怎么用idea创建一个SpringBoot项目

《怎么用idea创建一个SpringBoot项目》本文介绍了在IDEA中创建SpringBoot项目的步骤,包括环境准备(JDK1.8+、Maven3.2.5+)、使用SpringInitializr... 目录如何在idea中创建一个SpringBoot项目环境准备1.1打开IDEA,点击New新建一个项

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》:本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho

MySQL 用户创建与授权最佳实践

《MySQL用户创建与授权最佳实践》在MySQL中,用户管理和权限控制是数据库安全的重要组成部分,下面详细介绍如何在MySQL中创建用户并授予适当的权限,感兴趣的朋友跟随小编一起看看吧... 目录mysql 用户创建与授权详解一、MySQL用户管理基础1. 用户账户组成2. 查看现有用户二、创建用户1. 基

基于Python开发Windows屏幕控制工具

《基于Python开发Windows屏幕控制工具》在数字化办公时代,屏幕管理已成为提升工作效率和保护眼睛健康的重要环节,本文将分享一个基于Python和PySide6开发的Windows屏幕控制工具,... 目录概述功能亮点界面展示实现步骤详解1. 环境准备2. 亮度控制模块3. 息屏功能实现4. 息屏时间

SQLite3命令行工具最佳实践指南

《SQLite3命令行工具最佳实践指南》SQLite3是轻量级嵌入式数据库,无需服务器支持,具备ACID事务与跨平台特性,适用于小型项目和学习,sqlite3.exe作为命令行工具,支持SQL执行、数... 目录1. SQLite3简介和特点2. sqlite3.exe使用概述2.1 sqlite3.exe

基于Python实现一个Windows Tree命令工具

《基于Python实现一个WindowsTree命令工具》今天想要在Windows平台的CMD命令终端窗口中使用像Linux下的tree命令,打印一下目录结构层级树,然而还真有tree命令,但是发现... 目录引言实现代码使用说明可用选项示例用法功能特点添加到环境变量方法一:创建批处理文件并添加到PATH1

Python中使用uv创建环境及原理举例详解

《Python中使用uv创建环境及原理举例详解》uv是Astral团队开发的高性能Python工具,整合包管理、虚拟环境、Python版本控制等功能,:本文主要介绍Python中使用uv创建环境及... 目录一、uv工具简介核心特点:二、安装uv1. 通过pip安装2. 通过脚本安装验证安装:配置镜像源(可