node.js与前端交互
在构建命令行界面（CLI）时，Node.js可能非常有用。 在本文中，我将教您如何使用Node.js来构建一个CLI，该CLI会提出一些问题并根据答案创建文件。
开始吧
让我们从创建一个全新的npm包开始。 （Npm是JavaScript程序包管理器。）
mkdir my-script
cd my-script
npm init
Npm会问一些问题。 之后，我们需要安装一些软件包。
npm install --save chalk figlet inquirer shelljs
这些软件包的作用如下：
- 粉笔：正确完成终端字符串的样式
- Figlet：一个用于用普通文本制作大字母的程序
- 查询者：常见的交互式命令行用户界面的集合
- ShellJS： Node.js的可移植Unix Shell命令
制作一个index.js文件
现在，我们将创建一个具有以下内容的index.js文件：
#
!/ usr
/ bin
/ env node
const inquirer
= require
(
"inquirer"
)
;
const chalk
= require
(
"chalk"
)
;
const figlet
= require
(
"figlet"
)
;
const shell
= require
(
"shelljs"
)
;
计划CLI
在编写任何代码之前，先计划一下CLI需要做什么，这总是很好。 此CLI只会做一件事： 创建一个文件 。
CLI会问两个问题-文件名是什么，扩展名是什么？-然后创建文件，并显示带有创建的文件路径的成功消息。
// index.js
const run
= async
(
)
=>
{
// show script introduction
// ask questions
// create the file
// show success message
}
;
run
(
)
;
第一个功能是脚本介绍。 让我们使用chalk和figlet完成工作。
const init
=
(
)
=>
{
console.
log
(
chalk.
green
(
figlet.
textSync
(
"Node JS CLI"
,
{
font
:
"Ghost"
,
horizontalLayout
:
"default"
,
verticalLayout
:
"default"
}
)
)
)
;
}
const run
= async
(
)
=>
{
// show script introduction
init
(
)
;
// ask questions
// create the file
// show success message
}
;
run
(
)
;
其次，我们将编写一个询问问题的函数。
const askQuestions
=
(
)
=>
{
const questions
=
[
{
name
:
"FILENAME"
,
type
:
"input"
,
message
:
"What is the name of the file without extension?"
}
,
{
type
:
"list"
,
name
:
"EXTENSION"
,
message
:
"What is the file extension?"
,
choices
:
[
".rb"
,
".js"
,
".php"
,
".css"
]
,
filter
:
function
( val
)
{
return val.
split
(
"."
)
[
1
]
;
}
}
]
;
return inquirer.
prompt
( questions
)
;
}
;
// ...
const run
= async
(
)
=>
{
// show script introduction
init
(
)
;
// ask questions
const answers
= await askQuestions
(
)
;
const
{ FILENAME
, EXTENSION
}
= answers
;
// create the file
// show success message
}
;
注意来自inquirer的常量FILENAME和EXTENSIONS。
下一步将创建文件。
const createFile
=
( filename
, extension
)
=>
{
const filePath
= `$
{ process.
cwd
(
)
}
/ $
{ filename
} .$
{ extension
} `
shell.
touch
( filePath
)
;
return filePath
;
}
;
// ...
const run
= async
(
)
=>
{
// show script introduction
init
(
)
;
// ask questions
const answers
= await askQuestions
(
)
;
const
{ FILENAME
, EXTENSION
}
= answers
;
// create the file
const filePath
= createFile
( FILENAME
, EXTENSION
)
;
// show success message
}
;
最后但并非最不重要的一点，我们将显示成功消息以及文件路径。
const success
=
( filepath
)
=>
{
console.
log
(
chalk.
white .
bgGreen .
bold
( `Done
! File created at $
{ filepath
} `
)
)
;
}
;
// ...
const run
= async
(
)
=>
{
// show script introduction
init
(
)
;
// ask questions
const answers
= await askQuestions
(
)
;
const
{ FILENAME
, EXTENSION
}
= answers
;
// create the file
const filePath
= createFile
( FILENAME
, EXTENSION
)
;
// show success message
success
( filePath
)
;
}
;
让我们通过运行node index.js测试脚本。 这是我们得到的：
完整代码
这是最终代码：
#
!/ usr
/ bin
/ env node
const inquirer
= require
(
"inquirer"
)
;
const chalk
= require
(
"chalk"
)
;
const figlet
= require
(
"figlet"
)
;
const shell
= require
(
"shelljs"
)
;
const init
=
(
)
=>
{
console.
log
(
chalk.
green
(
figlet.
textSync
(
"Node JS CLI"
,
{
font
:
"Ghost"
,
horizontalLayout
:
"default"
,
verticalLayout
:
"default"
}
)
)
)
;
}
;
const askQuestions
=
(
)
=>
{
const questions
=
[
{
name
:
"FILENAME"
,
type
:
"input"
,
message
:
"What is the name of the file without extension?"
}
,
{
type
:
"list"
,
name
:
"EXTENSION"
,
message
:
"What is the file extension?"
,
choices
:
[
".rb"
,
".js"
,
".php"
,
".css"
]
,
filter
:
function
( val
)
{
return val.
split
(
"."
)
[
1
]
;
}
}
]
;
return inquirer.
prompt
( questions
)
;
}
;
const createFile
=
( filename
, extension
)
=>
{
const filePath
= `$
{ process.
cwd
(
)
}
/ $
{ filename
} .$
{ extension
} `
shell.
touch
( filePath
)
;
return filePath
;
}
;
const success
= filepath
=>
{
console.
log
(
chalk.
white .
bgGreen .
bold
( `Done
! File created at $
{ filepath
} `
)
)
;
}
;
const run
= async
(
)
=>
{
// show script introduction
init
(
)
;
// ask questions
const answers
= await askQuestions
(
)
;
const
{ FILENAME
, EXTENSION
}
= answers
;
// create the file
const filePath
= createFile
( FILENAME
, EXTENSION
)
;
// show success message
success
( filePath
)
;
}
;
run
(
)
;
在任何地方使用脚本
要在任何地方执行此脚本，请在package.json文件中添加bin部分，然后运行npm link 。
{
"name"
:
"creator"
,
"version"
:
"1.0.0"
,
"description"
:
""
,
"main"
:
"index.js"
,
"scripts"
:
{
"test"
:
"echo \" Error: no test specified \" && exit 1"
,
"start"
:
"node index.js"
}
,
"author"
:
""
,
"license"
:
"ISC"
,
"dependencies"
:
{
"chalk"
:
"^2.4.1"
,
"figlet"
:
"^1.2.0"
,
"inquirer"
:
"^6.0.0"
,
"shelljs"
:
"^0.8.2"
}
,
"bin"
:
{
"creator"
:
"./index.js"
}
}
运行npm link可使该脚本在任何地方可用。
这是在您运行以下命令时发生的情况：
/ usr
/ bin
/ creator -
>
/ usr
/ lib
/ node_modules
/ creator
/ index.js
/ usr
/ lib
/ node_modules
/ creator -
>
/ home
/ hugo
/ code
/ creator
它将index.js文件链接为可执行文件。 这仅是由于CLI脚本的第一行： #!/usr/bin/env node 。
现在，我们可以通过调用以下命令来运行此脚本：
$ creator
结语
如您所见，Node.js使构建出色的命令行工具变得非常容易！ 如果您想走得更远，请检查以下其他软件包：
在评论中告诉我们您构建CLI的经验。
翻译自: https://opensource.com/article/18/7/node-js-interactive-cli
node.js与前端交互
8248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
