用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。