1.0.0 • Published 4 years ago

liuhao v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
4 years ago

前端工程化简单实现

初始化工作

  • cd ~/Documents/fcc/ mkdir cli-test && cd cli-test && npm init -y
  • package.json 里面加一句: "bin": {"liuhao": "./index.js"}
  • ./index.js 最顶上加一句 #!/usr/bin/env node
  • 在当前package.json目录下,执行npm link,将当前的代码在npm全局目录下留个快捷方式,创建一个软连接。npm检测到pakage.json里面存在一个bin字段,它就同时在全局npm包目录下生成了一个可执行文件,同样的 npm unlink可以解除这个软连接
  • 接着我们就可以测试一下我们的cli命令是否生效,在命令行输入liuhao 回车:

参数读取

在我们使用别的成熟的 cli 工具时都是可以往里面传递参数的比如webpack --mode development,我们也可以在代码里面接收我们自己cli的参数 这里会用到一个东西: process,我们可以在 "./index.js" 文件直接输出这个 console.log(process.arvg):

'/usr/local/bin/node', '/usr/local/bin/liuhao' 可以看到process.arvg是一个数组(前两个元素是固定的,分别是node程序的路径和脚本存放的位置),从第三位开始才是额外输入的内容

我们更改命令为 liuhao fcc,再看输出:

'/usr/local/bin/node', '/usr/local/bin/liuhao', 'fcc' 可以看到在 process.arvg 上面挂上了我们传递进来的参数

npm社区中也有一些优秀的命令行参数解析包,比如yargs,commander.js等,如果想使用较复杂的参数或者命令,建议用第三方包,手写解析太麻烦

命令行交互

用到inquirer: npm i -S inquirer 当我们知道用户输入的是什么的时候,我们就可以通过node的一些api将对应的项目模板给拷贝过来

包的发布

之前我们在本地是通过 npm link 来运行我们的命令的,现在我们做好一个 cli 工具的时候,我们需要将包给发布到 npm 的官网上面 - npm adduser - npm login(logout) - npm whoami - npm publish --access=public 我们执行npm unlink 这个时候我们的命令就不生效了,这个时候 我们安装我们发布上去的包 npm i -g liuhao,这时我们又可以运行我们的命令了