用node開發一個生成react專案的cli工具

Whirring發表於2018-06-12
React

我們經常使用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開發一個生成react專案的cli工具

為了遵循"使用者即爸爸"原則，我們新增輔助函式，當使用者沒輸入任何引數，即執行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後面沒有專案名，則會提示新建)

用node開發一個生成react專案的cli工具

在這裡我維護了兩套react模板供選擇，放在src目錄下去，大家可以根據需求修改或者選擇自己的，當然，可以忽略該目錄，畢竟該博文主要是介紹如何用nodejs開發一個cli工具的，並不是react教程，哈哈。 選擇其中一項之後，就會出現以下提示

用node開發一個生成react專案的cli工具

在我們生產的專案目錄下執行snake view Test，就會在src/view目錄下面自動生成一個Test.jsx的react component

用node開發一個生成react專案的cli工具

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。

相關文章