用node开发一个生成react项目的cli工具

咱们常常使用create-react-app、vue-cli来快速生成一个新的react或者vue项目，它们的原理是什么，下面就带使用node来开发一个简单的react-cli工具，来揭开其神秘的面纱。

如下是一个简单的 Node.js 的脚本：

#!/usr/bin/env node

console.log('Hello CLI');
复制代码

为了更好的和命令行界面交互，咱们选择使用commander传送门

yarn install commander
复制代码

而后编写cli须要实现的功能

import * as commander from "commander";
commander
  .version(version, "-V, --version")
  .usage("[Options] | [Commands] <file>")

commander
  .command('init')
  .description('generation a webpack project')
  .option('dir')

commander
  .command('view')
  .description('generation a react component')
  .option('<file>')

commander.on('--help', function(){
    console.log('\n Examples:');
    console.log('');
    console.log('  $ snake -h');
    console.log('  $ snake init snake-demo ');
    console.log('');
  });

commander.parse(process.argv);
复制代码

此时，在控制台里执行node index.js -h，会出现如下界面

为了遵循"用户即爸爸"原则，咱们添加辅助函数，当用户没输入任何参数，即执行node index.js时,显示帮助信息

function help () {
  commander.parse(process.argv)
  if (commander.args.length < 1) return commander.help()
}
help()
复制代码

为了获取用户输入，咱们选择使用inquirer传送门

yarn add inquirer
复制代码

编写init函数

在这里须要注意的是，node的版本须要>=8，若是在小于8版本的环境下执行，会获得如下结果

Please make sure the node version is above 8.0

在这里咱们写了个setProjectName方法来获取须要建立项目的名称

export async function setProjectName(dir?: string) {
  const { projectName } = await inquirer.prompt({
    name: 'projectName',
    message: 'input project name',
  });
  global['projectName'] = projectName
  if (!projectName) {
    console.log('\n please input dir'.green + '\n');
    await setProjectName();
  } else if (fs.existsSync(projectName)) {
    console.log('\n the dir has exists, please input another one'.green + '\n');
    await setProjectName();
  } else {
    return projectName;
  }
}
复制代码

执行 snake init snake-demo(ps: 若是init后面没有项目名，则会提示新建)

在这里我维护了两套react模板供选择，放在src目录下去，你们能够根据需求修改或者选择本身的，固然，能够忽略该目录，毕竟该博文主要是介绍如何用nodejs开发一个cli工具的，并非react教程，哈哈。 选择其中一项以后，就会出现如下提示

在咱们生产的项目目录下执行snake view Test，就会在src/view目录下面自动生成一个Test.jsx的react component

ps: 能够在package.json配置bin字段，bin项用来指定各个内部命令对应的可执行文件的位置。

"bin": {
   "snake": "bin/index.js"
 },
复制代码

上述代码即 snake 命令对应的可执行文件为 bin 子目录下的bin/index.js,npm会寻找这个文件，在node_modules/.bin/目录下创建符号连接。因为node_modules/.bin/目录会在运行时加入系统的PATH变量，所以在运行npm时，就能够不带路径，直接经过命令来调用这些脚本

至此，咱们的cli工具开发完成,意犹未尽者，可移步 github。