用 nodejs 寫一個命令列工具 ：建立 react 元件的命令列工具

hileix發表於2018-12-16
NodeJS命令列React元件

用 nodejs 寫一個命令列工具 ：建立 react 元件的命令列工具

前言

上週，同事抱怨說 react 怎麼不能像 angular 那樣，使用命令列工具來生成一個元件。對呀，平時工作時，想要建立一個 react 的元件，都是直接 copy 一個元件，然後做一些修改。為什麼不能將這個過程交給程式去做呢？當天晚上，我就仿照 angular-cli 的 api，寫了一個生成 react 元件的命令列工具 rcli。在這裡記錄一下實現的過程。

api 設計

0.1.0 版本的 rcli 參照 angular-cli 的設計，有兩個功能：

  1. 使用 rcli new PROJECT-NAME 命令，建立一個 react 專案，其中生成專案的腳手架當然是 create-react-app 啦
  2. 使用 rcli g component MyComponent 命令， 建立一個 MyComponent 元件， 這個元件是一個資料夾，在資料夾中包含 index.js、MyComponent.js、MyComponent.css 三個檔案

後來發現 rcli g component MyComponent 命令在 平時開發過程中是不夠用的，因為這個命令只是建立了一個類元件，且繼承自 React.Component。

在平時開發 過程中，我們會用到這三類元件：

  1. 繼承自 React.Component 的類元件
  2. 繼承自 React.PureComponent 的類元件
  3. 函式元件（無狀態元件）

注： 將來可以使用 Hooks 來代替之前的類元件

於是就有了 0.2.0 版本的 rcli

0.2.0 版本的 rcli

用法

Usage: rcli [command] [options]

Commands:
  new <appName>
  g <componentName>

`new` command options:
  -n, --use-npm                    Whether to use npm to download dependencies

`g` command options:
  -c, --component <componentName>  The name of the component
  --no-folder                      Whether the component have not it's own folder
  -p, --pure-component             Whether the component is a extend from PureComponent
  -s, --stateless                  Whether the component is a stateless component
複製程式碼
使用 create-react-app 來建立一個應用
rcli new PROJECT-NAME
cd PROJECT-NAME
yarn start
複製程式碼

或者你可以使用 npm 安裝依賴

rcli new PROJECT-NAME --use-npm
cd PROJECT-NAME
npm start
複製程式碼
生成純元件（繼承自 PureComponent，以提高效能）
rcli g -c MyNewComponent -p
複製程式碼
生成類元件（有狀態元件）
rcli g -c MyNewComponent
複製程式碼

等於：

rcli g -c ./MyNewComponent
複製程式碼
生成函式元件（無狀態元件）
rcli g -c MyNewComponent -s
複製程式碼
生成元件不在資料夾內（也不包含 css 檔案和 index.js 檔案）
# 預設生成的元件都會都包含在資料夾中的，若不想生成的元件被資料夾包含，則加上 --no-folder 選項
rcli g -c MyNewComponent --no-folder
複製程式碼

實現過程

1. 建立專案

  • 建立名為 hileix-rcli 的專案
  • 在專案根目錄使用 npm init -y 初始化一個 npm package 的基本資訊（即生成 package.json 檔案）
  • 在專案根建立 index.js 檔案，用來寫使用者輸入命令後的主要邏輯程式碼
  • 編輯 package.json 檔案，新增 bin 欄位：
{
  "name": "hileix-rcli",
  "version": "0.2.0",
  "description": "",
  "main": "index.js",
  "bin": {
    "rcli": "./index.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/hileix/rcli.git"
  },
  "keywords": [],
  "author": "hileix <304192604@qq.com> (https://github.com/hileix)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/hileix/rcli/issues"
  },
  "homepage": "https://github.com/hileix/rcli#readme",
  "dependencies": {
    "chalk": "^2.4.1",
    "commander": "^2.19.0",
    "cross-spawn": "^6.0.5",
    "fs-extra": "^7.0.1"
  }
}
複製程式碼
  • 在專案根目錄下，使用 npm link 命令，建立軟連結指向到本專案的 index.js 檔案。這樣，就能再開發的時候，直接使用 rcli 命令直接進行測試 ~

2. rcli 會依賴一些包：

  • commander：tj 大神寫的一款專門處理命令列的工具。主要用來解析使用者輸入的命令、選項
  • cross-spawn：nodejs spawn 的跨平臺的版本。主要用來建立子程式執行一些命令
  • chalk：給命令列中的文字新增樣式。
  • path：nodejs path 模組
  • fs-extra：提供對檔案操作的方法

3.實現 rcli new PROJECT-NAME

#!/usr/bin/env node

'use strict';

const program = require('commander');
const log = console.log;

// new command
program
  // 定義 new 命令，且後面跟一個必選的 projectName 引數
  .command('new <projectName>')
  // 對 new 命令的描述
  .description('use create-react-app create a app')
  // 定義使用 new 命令之後可以使用的選項 -n（使用 npm 來安裝依賴）
  // 在使用 create-react-app 中，我們可以可以新增 --use-npm 選項，來使用 npm 安裝依賴（預設使用 yarn 安裝依賴）
  // 所以，我將這個選項新增到了 rcli 中
  .option('-n, --use-npm', 'Whether to use npm to download dependencies')
  // 定義執行 new 命令後呼叫的回撥函式
  // 第一個引數便是在定義 new 命令時的必選引數 projectName
  // cmd 中包含了命令中選項的值，當我們在 new 命令中使用了 --use-npm 選項時，cmd 中的 useNpm 屬性就會為 true，否則為 undefined
  .action(function(projectName, cmd) {
    const isUseNpm = cmd.useNpm ? true : false;
    // 建立 react app
    createReactApp(projectName, isUseNpm);
  });

program.parse(process.argv);

/**
 * 使用 create-react-app 建立專案
 * @param {string} projectName 專案名稱
 * @param {boolean} isUseNpm 是否使用 npm 安裝依賴
 */
function createReactApp(projectName, isUseNpm) {
  let args = ['create-react-app', projectName];
  if (isUseNpm) {
    args.push('--use-npm');
  }
  // 建立子程式，執行 npx create-react-app PROJECT-NAME [--use-npm] 命令
  spawn.sync('npx', args, { stdio: 'inherit' });
}
複製程式碼

上面的程式碼邊實現了 rcli new PROJECT-NAME 的功能：

  • #!/usr/bin/env node 表示使用 node 執行本指令碼

4.實現 rcli g [options]

#!/usr/bin/env node

'use strict';
const program = require('commander');
const spawn = require('cross-spawn');
const chalk = require('chalk');
const path = require('path');
const fs = require('fs-extra');

const log = console.log;

program
  // 定義 g 命令
  .command('g')
  // 命令 g 的描述
  .description('Generate a component')
  // 定義 -c 選項，接受一個必選引數 componentName：元件名稱
  .option('-c, --component-name <componentName>', 'The name of the component')
  // 定義 --no-folder 選項：表示當使用該選項時，元件不會被資料夾包裹
  .option('--no-folder', 'Whether the component have not it is own folder')
  // 定義 -p 選項：表示當使用該選項時，元件為繼承自 React.PureComponent 的類元件
  .option(
    '-p, --pure-component',
    'Whether the component is a extend from PureComponent'
  )
  // 定義 -s 選項：表示當使用該選項時，元件為無狀態的函式元件
  .option(
    '-s, --stateless',
    'Whether the component is a extend from PureComponent'
  )
  // 定義執行 g 命令後呼叫的回撥函式
  .action(function(cmd) {
    // 當 -c 選項沒有傳引數進來時，報錯、退出
    if (!cmd.componentName) {
      log(chalk.red('error: missing required argument `componentName`'));
      process.exit(1);
    }
    // 建立元件
    createComponent(
      cmd.componentName,
      cmd.folder,
      cmd.stateless,
      cmd.pureComponent
    );
  });

program.parse(process.argv);

/**
 * 建立元件
 * @param {string} componentName 元件名稱
 * @param {boolean} hasFolder 是否含有資料夾
 * @param {boolean} isStateless 是否是無狀態元件
 * @param {boolean} isPureComponent 是否是純元件
 */
function createComponent(
  componentName,
  hasFolder,
  isStateless = false,
  isPureComponent = false
) {
  let dirPath = path.join(process.cwd());
  // 元件在資料夾中
  if (hasFolder) {
    dirPath = path.join(dirPath, componentName);

    const result = fs.ensureDirSync(dirPath);
    // 目錄已存在
    if (!result) {
      log(chalk.red(`${dirPath} already exists`));
      process.exit(1);
    }
    const indexJs = getIndexJs(componentName);
    const css = '';
    fs.writeFileSync(path.join(dirPath, `index.js`), indexJs);
    fs.writeFileSync(path.join(dirPath, `${componentName}.css`), css);
  }
  let component;
  // 無狀態元件
  if (isStateless) {
    component = getStatelessComponent(componentName, hasFolder);
  } else {
    // 有狀態元件
    component = getClassComponent(
      componentName,
      isPureComponent ? 'React.PureComponent' : 'React.Component',
      hasFolder
    );
  }

  fs.writeFileSync(path.join(dirPath, `${componentName}.js`), component);
  log(
    chalk.green(`The ${componentName} component was successfully generated!`)
  );
  process.exit(1);
}

/**
 * 獲取類元件字串
 * @param {string} componentName 元件名稱
 * @param {string} extendFrom 繼承自：'React.Component' | 'React.PureComponent'
 * @param {boolean} hasFolder 元件是否在資料夾中（在資料夾中的話，就會自動載入 css 檔案）
 */
function getClassComponent(componentName, extendFrom, hasFolder) {
  return '省略...';
}

/**
 * 獲取無狀態元件字串
 * @param {string} componentName 元件名稱
 * @param {boolean} hasFolder 元件是否在資料夾中（在資料夾中的話，就會自動載入 css 檔案）
 */
function getStatelessComponent(componentName, hasFolder) {
  return '省略...';
}

/**
 * 獲取 index.js 檔案內容
 * @param {string} componentName 元件名稱
 */
function getIndexJs(componentName) {
  return `import ${componentName} from './${componentName}';
export default ${componentName};
`;
}
複製程式碼
  • 這樣就實現了 rcli g [options] 命令的功能

總結

  • api 設計是很重要的：好的 api 設計能讓使用者更加方便地使用，且變動少
  • 當自己想不到該怎麼設計 api 時，可以參考別人的 api，看看別人是怎麼設計的好用的

相關文章