本篇内容介绍了“怎么实现一个Node.js-CLI开发工具”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
首先,我们要打开CLI界面,用npm初始化一个项目:
npm init
package.json
{ "name": "mycli", "version": "1.0.0", "description": "A cli-demo", "main": "index.js", "author": "xmanlin", "license": "MIT"}
里面一些用不上都已经去掉。
相信很多小伙伴在使用 npm 初始化项目的时候,或者在用 Vue CLI 搭建项目的时候,会发现它们有一个共同点——都有自己个性化的命令,感觉有点酷炫。那么我们怎么才能实现自己的命令呢,很简单,在 package.json 添加 bin
:
{ "name": "mycli", "version": "1.0.0", "description": "A cli-demo", "main": "index.js", "bin": {"mycli": "./index.js" }, "author": "xmanlin", "license": "MIT"}
package.json中的 bin
的作用就是可以让设置的 mycli
成为一个可执行命令,而命令所执行的文件就是后面的 index.js
,这些都可以根据自己的想法来定。接着我们要继续对 index.js
进行修改:
index.js
#!/usr/bin/env nodeconsole.log("执行成功")
这里的第一行很重要,这里表明 index.js
是 node 可执行文件。
设置完成后,就可以全局安装我们的CLI工具了:
npm install -g
+ mycli@1.0.0added 1 package from 1 contributor in 0.12s
可以看见全局安装成功,最后我们试试我们的命令:
mycli
输出:
执行成功
刚刚小伙伴们在进行命令行操作的时候,使用了不同选项的命令,例如 npm init
、 npm install -g
,其中包含一些交互式的,比如在初始化项目时, npm init
提供一些输入问答形式的命令。接下来,我们就来为自己的CLI工具添加这些类似的命令。
我们可以依赖两个库进行我们的开发:commander.js和Inquirer.js
commander.js:完整的 node.js 命令行解决方案。我们可以利用它,快速的编写我们的命令行,自定义化操作。
Inquirer.js:是常规交互式命令行用户接口的集合,提供给 Node.js 一个方便嵌入,漂亮的命令行接口。我们可以用来快速进行交互式命令行的编写。
这两个库的具体用法,这里就过多的介绍,小伙伴们可以点击上面名字的链接去熟悉一下,花不了太多时间,实际用起来也不难,后面那个没有中文Readme,但是不妨碍大家会搜索呀~对不对。
我们首先来实现类似于 npm -v
、node -v
这样类似的命令选项。
首先安装commander.js:
npm install commander
然后引入 commander.js 并对 index.js
进行修改
#!/usr/bin/env nodeconst { program } = require('commander');// 字符串分割为数组的方法function strToArr(value, preValue){return value.split(',') }// cli版本program.version(require('./package').version, '-v, --version', 'cli的最新版本');// 设置选项program .option('-d, --debug', '调试一下') .option('-l, --list <value>', '把字符串分割为数组', strToArr) .action((options, command) => {// 进行逻辑处理if(options.debug) {console.log("调试成功") }if(options.list !== undefined) {console.log(options.list) } });// 处理命令行输入的参数program.parse(process.argv);
我们来试试刚刚设置的命令选项:
mycli -d
输出:
调试成功
输入:
mycli -l 1,2,3
输出:
[ '1', '2', '3' ]
在commander.js里面已经给我们定义好了 --help
选项:
mycli -h
输出:
Usage: index [options] Options: -v, --version cli的最新版本 -d, --debug 调试一下 -l, --list <value> 把字符串分割为数组 -h, --help display help for command
利用 --help
选项,我们可以很清楚的了解到 mycli 中已有多少命令。
在项目开发中,我们有时会用到类似于 npm run xxx
这样的命令,其中run
就相当于npm的子命令。这里我们也可以给mycli设置类似的子命令:
const { program } = require('commander'); ...// 创建文件命令行program .command('create <filename>') .description('创建一个文件') .action((filename) => {console.log(filename) }) ...// 处理命令行输入的参数program.parse(process.argv);
command('create <filename>')
就是创建了一个 mycli 的 create
子命令,后面跟了一个必填参数。
输入:
mycli create file
输出
file
子命令创建成功。
我们现在能够定义选项,设置命令了。接下来我们就可以实际做点东西,利用命令行来创建项目的文件。
简单的设计一个流程:
我们先来创建一个templates文件夹,然后在里面写几个常见的模板文件,这里的模板文件运用到了模板字符串,结构如下:
reactClass.js
module.exports = function (className) {return `import * as React from 'react';export class ${className} extends React.Component{constructor(props){super(props);this.state = {} }componentDidMount(){ }render() {return (<div></div>) } }` }
vueTemplate.js
module.exports = function () { return `<template><div></div></template><script>export default {data() {return {} }methods: { } } </sctipt><style lang="scss" scoped></style>` }
index.js
const reactClass = require('./reactClass');const vueTemplate = require('./vueTemplate');module.exports = [ { name: 'reactClass', src: reactClass }, { name: 'vueTemplate', src: vueTemplate } ]
模板文件创建完成后,我们先把它放在一边,待会儿才用的上。
当我们输入 mycli create file
命令后,需要得到下图中的效果,我们可以手动上下进行选择,也就是可以被称为交互式的命令。
这里就要用到我们上文中提到的另外一个库——Inquirer.js
首先肯定需要进行安装
npm install inquirer
引入并修改我们根目录下的index.js:
#!/usr/bin/env nodeconst { program } = require('commander');const inquirer = require('inquirer');// 引入模板文件const templates = require('./templates/index');// 命令行选择列表let prompList = [ {type:'list',name: 'template',message: '请选择你想要生成的模板?',choices: templates,default: templates[0] } ] ...// 创建文件命令行program .command('create <filename>') .description('创建一个文件') .action(async (filename) => {const res = await inquirer.prompt(prompList)console.log(res) })// 处理命令行输入的参数program.parse(process.argv);
接下来我们在命令行中输入:
mycli create file
就可以得到上面所展示的效果
然后选择第一个后回车:
可以看到输出了我们所选择模板的名字。接下来就是进行实际文件的创建。
创建文件则需要调用node.js的fs相关api,然后修改index.js:
// 处理文件const fs = require("fs"); ...// 创建文件命令行program .command('create <filename>') .description('创建一个文件') .action(async (filename) => {const res = await inquirer.prompt(prompList)if(res.template === 'reactClass') { templates.forEach((item) => {if(item.name === 'reactClass') { fs.writeFile(`./${filename}.jsx`, item.src(filename), function(err) {if(err) {console.log('创建失败:', err) } else {console.log(`创建文件成功!${filename}.jsx`); } }) } }) }if(res.template === 'vueTemplate') { templates.forEach((item) => {if(item.name === 'vueTemplate') { fs.writeFile(`./${filename}.vue`, item.src(), function(err) {if(err) {console.log('创建失败:', err) } else {console.log(`文件创建成功!${filename}`); } }) } }) } }) ...
我们再次在命令行中输入mycli create file
,然后选择一个模板。
输出:
创建文件成功!file.jsx
同时我们可以看见项目根目录下面新增了一个file.jsx文件:
打开file.jsx可以看见文件的类名也进行了相应的填写。不仅如此,因为我们的mycli是全局安装的,所以可以说在电脑中任何位置,只要我们输入 mycli create file
,我们在当前目录下都能获取到file.jsx文件。也就意味着,我们在开发一些项目的时候,不用在复制粘贴,删删改改。
直接一行命令就能搞定了~
既然能创建文件,那么能否创建文件夹?答案是肯定的,只需要继续添加命令就行:
...// 创建文件夹命令行program .command('create-f <folder>') .description('创建一个文件夹') .action((folder) => {if(fs.existsSync(folder)) {console.log('文件夹已存在') } else { fs.mkdirSync(folder);console.log('文件夹创建成功') } }); ...
然后在命令行中输入mycli create-f xxx
,同样可以创建想要命名文件夹。
“怎么实现一个Node.js-CLI开发工具”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。