react -cli 路由_手把手教你使用nodejs编写cli(命令行)

手把手教你使用nodejs编写cli(命令行)

前端日常开发中，会遇见各种各样的cli，比如一行命令帮你打包的webpack，一行命令帮你生成vue项目模板的vue-cli，还有创建react项目的create-react-app等等等等。这些工具极大地方便了我们的日常工作，让计算机自己去干繁琐的工作，而我们，就可以节省出大量的时间用于学习、交流、开发、逛steam。

但是有时候一些十分特别的需求，我们是找不到适合的cli工具去做的。比如说，你的项目十分庞大，你给项目添加一个新的路由，要经过创建目录 -> 创建.vue文件 -> 更新vue-router的路由列表这一趟流程，就算快捷键创建目录文件用得再熟悉，也比不过你一行命令来得快，特别是路由目录嵌套深，.vue文件初始化模板复杂的时候。

所以呢，何不为自己项目写一个cli？就专门做这些繁琐的活？

0x1 hello world

nodejs的cli，本质就是跑node脚本嘛，基本上每位前端er都会：

// index.jsconsole.log('hello world')复制代码

然后命令行调用

> node index.js## 输出：> hello world复制代码

可以做得更逼真一点，我们在package.json里面的scripts字段上添加一下脚本名：

{ "scripts":{ "hello":"node index.js" }}复制代码

然后命令行调用：

> npm run hello复制代码

但是，看到这里你肯定会说，人家webpack还有vue-cli都是“有名字”的！什么vue-cli init app、webpack -p的，多漂亮，看看这个命令行，node index.js，还npm run hello，谁不会啊，丑不拉几的，怕又不是来水文章的哦？差评！！

别急啊各位大人，接下来就说说，如何给这个node脚本起个名字。

0x2 起名字

姑且，先把这个cli的名字命名为hello-cli，就是我们能够在命令行里面，输入hello-cli，然后它就打印一句hello world，没有node也没有npm，就是：

1. 这里，我们需要做几步操作：index.js文件顶部声明执行环境：

// index.js#!/usr/bin/env nodeconsole.log('hello world')复制代码

1. 添加#!/usr/bin/env node或者#!/usr/bin/node，这是告诉系统，下面这个脚本，使用nodejs来执行。当然，这个系统不包括windows，因为windows下有个JScript的历史遗留物在，会让你的脚本跑不起来。
2. #!/usr/bin/env node的意思是让系统自己去找node的执行程序。
3. #!/usr/bin/node的意思是，明确告诉系统，node的执行程序在路径为/usr/bin/node。
4. 添加package.json的bin字段。
5. 可以在index.js当前的目录下执行npm init创建一个package.json，然后在package.json里面，添加一个bin字段：

{ "name": "hello-test