用 nodejs 寫一個(gè)命令行工具：創(chuàng)建 react 組件的命令行工具

WelliJhon 發(fā)布于2019-08-23 14:06 / 1046人閱讀

摘要：用寫一個(gè)命令行工具創(chuàng)建組件的命令行工具前言上周，同事抱怨說(shuō)怎么不能像那樣，使用命令行工具來(lái)生成一個(gè)組件。為什么不能將這個(gè)過(guò)程交給程序去做呢當(dāng)天晚上，我就仿照的，寫了一個(gè)生成組件的命令行工具。

用 nodejs 寫一個(gè)命令行工具：創(chuàng)建 react 組件的命令行工具 前言

上周，同事抱怨說(shuō) react 怎么不能像 angular 那樣，使用命令行工具來(lái)生成一個(gè)組件。對(duì)呀，平時(shí)工作時(shí)，想要?jiǎng)?chuàng)建一個(gè) react 的組件，都是直接 copy 一個(gè)組件，然后做一些修改。為什么不能將這個(gè)過(guò)程交給程序去做呢？當(dāng)天晚上，我就仿照 angular-cli 的 api，寫了一個(gè)生成 react 組件的命令行工具 rcli。在這里記錄一下實(shí)現(xiàn)的過(guò)程。

api 設(shè)計(jì) 0.1.0 版本的 rcli 參照 angular-cli 的設(shè)計(jì)，有兩個(gè)功能：

使用 rcli new PROJECT-NAME 命令，創(chuàng)建一個(gè) react 項(xiàng)目，其中生成項(xiàng)目的腳手架當(dāng)然是 create-react-app 啦

使用 rcli g component MyComponent 命令，創(chuàng)建一個(gè) MyComponent 組件，這個(gè)組件是一個(gè)文件夾，在文件夾中包含 index.js、MyComponent.js、MyComponent.css 三個(gè)文件

后來(lái)發(fā)現(xiàn) rcli g component MyComponent 命令在平時(shí)開(kāi)發(fā)過(guò)程中是不夠用的，因?yàn)檫@個(gè)命令只是創(chuàng)建了一個(gè)類組件，且繼承自 React.Component。

在平時(shí)開(kāi)發(fā) 過(guò)程中，我們會(huì)用到這三類組件：

繼承自 React.Component 的類組件

繼承自 React.PureComponent 的類組件

函數(shù)組件（無(wú)狀態(tài)組件）

注：將來(lái)可以使用 Hooks 來(lái)代替之前的類組件

于是就有了 0.2.0 版本的 rcli

0.2.0 版本的 rcli 用法

Usage: rcli [command] [options]

Commands:
  new 
  g 

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

`g` command options:
  -c, --component   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 來(lái)創(chuàng)建一個(gè)應(yīng)用

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

生成類組件（有狀態(tài)組件）

rcli g -c MyNewComponent

等于：

rcli g -c ./MyNewComponent

生成函數(shù)組件（無(wú)狀態(tài)組件）

rcli g -c MyNewComponent -s

生成組件不在文件夾內(nèi)（也不包含 css 文件和 index.js 文件）

# 默認(rèn)生成的組件都會(huì)都包含在文件夾中的，若不想生成的組件被文件夾包含，則加上 --no-folder 選項(xiàng)
rcli g -c MyNewComponent --no-folder

實(shí)現(xiàn)過(guò)程 1. 創(chuàng)建項(xiàng)目

創(chuàng)建名為 hileix-rcli 的項(xiàng)目

在項(xiàng)目根目錄使用 npm init -y 初始化一個(gè) npm package 的基本信息（即生成 package.json 文件）

在項(xiàng)目根創(chuàng)建 index.js 文件，用來(lái)寫用戶輸入命令后的主要邏輯代碼

編輯 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 <[email protected]> (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"
  }
}

在項(xiàng)目根目錄下，使用 npm link 命令，創(chuàng)建軟鏈接指向到本項(xiàng)目的 index.js 文件。這樣，就能再開(kāi)發(fā)的時(shí)候，直接使用 rcli 命令直接進(jìn)行測(cè)試 ~

2. rcli 會(huì)依賴一些包：

commander：tj 大神寫的一款專門處理命令行的工具。主要用來(lái)解析用戶輸入的命令、選項(xiàng)

cross-spawn：nodejs spawn 的跨平臺(tái)的版本。主要用來(lái)創(chuàng)建子進(jìn)程執(zhí)行一些命令

chalk：給命令行中的文字添加樣式。

path：nodejs path 模塊

fs-extra：提供對(duì)文件操作的方法

3.實(shí)現(xiàn) rcli new PROJECT-NAME

#!/usr/bin/env node

"use strict";

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

// new command
program
  // 定義 new 命令，且后面跟一個(gè)必選的 projectName 參數(shù)
  .command("new ")
  // 對(duì) new 命令的描述
  .description("use create-react-app create a app")
  // 定義使用 new 命令之后可以使用的選項(xiàng) -n（使用 npm 來(lái)安裝依賴）
  // 在使用 create-react-app 中，我們可以可以添加 --use-npm 選項(xiàng)，來(lái)使用 npm 安裝依賴（默認(rèn)使用 yarn 安裝依賴）
  // 所以，我將這個(gè)選項(xiàng)添加到了 rcli 中
  .option("-n, --use-npm", "Whether to use npm to download dependencies")
  // 定義執(zhí)行 new 命令后調(diào)用的回調(diào)函數(shù)
  // 第一個(gè)參數(shù)便是在定義 new 命令時(shí)的必選參數(shù) projectName
  // cmd 中包含了命令中選項(xiàng)的值，當(dāng)我們?cè)?new 命令中使用了 --use-npm 選項(xiàng)時(shí)，cmd 中的 useNpm 屬性就會(huì)為 true，否則為 undefined
  .action(function(projectName, cmd) {
    const isUseNpm = cmd.useNpm ? true : false;
    // 創(chuàng)建 react app
    createReactApp(projectName, isUseNpm);
  });

program.parse(process.argv);

/**
 * 使用 create-react-app 創(chuàng)建項(xiàng)目
 * @param {string} projectName 項(xiàng)目名稱
 * @param {boolean} isUseNpm 是否使用 npm 安裝依賴
 */
function createReactApp(projectName, isUseNpm) {
  let args = ["create-react-app", projectName];
  if (isUseNpm) {
    args.push("--use-npm");
  }
  // 創(chuàng)建子進(jìn)程，執(zhí)行 npx create-react-app PROJECT-NAME [--use-npm] 命令
  spawn.sync("npx", args, { stdio: "inherit" });
}

上面的代碼邊實(shí)現(xiàn)了 rcli new PROJECT-NAME 的功能：

#!/usr/bin/env node 表示使用 node 執(zhí)行本腳本

4.實(shí)現(xiàn) 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 選項(xiàng)，接受一個(gè)必選參數(shù) componentName：組件名稱
  .option("-c, --component-name ", "The name of the component")
  // 定義 --no-folder 選項(xiàng)：表示當(dāng)使用該選項(xiàng)時(shí)，組件不會(huì)被文件夾包裹
  .option("--no-folder", "Whether the component have not it is own folder")
  // 定義 -p 選項(xiàng)：表示當(dāng)使用該選項(xiàng)時(shí)，組件為繼承自 React.PureComponent 的類組件
  .option(
    "-p, --pure-component",
    "Whether the component is a extend from PureComponent"
  )
  // 定義 -s 選項(xiàng)：表示當(dāng)使用該選項(xiàng)時(shí)，組件為無(wú)狀態(tài)的函數(shù)組件
  .option(
    "-s, --stateless",
    "Whether the component is a extend from PureComponent"
  )
  // 定義執(zhí)行 g 命令后調(diào)用的回調(diào)函數(shù)
  .action(function(cmd) {
    // 當(dāng) -c 選項(xiàng)沒(méi)有傳參數(shù)進(jìn)來(lái)時(shí)，報(bào)錯(cuò)、退出
    if (!cmd.componentName) {
      log(chalk.red("error: missing required argument `componentName`"));
      process.exit(1);
    }
    // 創(chuàng)建組件
    createComponent(
      cmd.componentName,
      cmd.folder,
      cmd.stateless,
      cmd.pureComponent
    );
  });

program.parse(process.argv);

/**
 * 創(chuàng)建組件
 * @param {string} componentName 組件名稱
 * @param {boolean} hasFolder 是否含有文件夾
 * @param {boolean} isStateless 是否是無(wú)狀態(tài)組件
 * @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;
  // 無(wú)狀態(tài)組件
  if (isStateless) {
    component = getStatelessComponent(componentName, hasFolder);
  } else {
    // 有狀態(tài)組件
    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 組件是否在文件夾中（在文件夾中的話，就會(huì)自動(dòng)加載 css 文件）
 */
function getClassComponent(componentName, extendFrom, hasFolder) {
  return "省略...";
}

/**
 * 獲取無(wú)狀態(tài)組件字符串
 * @param {string} componentName 組件名稱
 * @param {boolean} hasFolder 組件是否在文件夾中（在文件夾中的話，就會(huì)自動(dòng)加載 css 文件）
 */
function getStatelessComponent(componentName, hasFolder) {
  return "省略...";
}

/**
 * 獲取 index.js 文件內(nèi)容
 * @param {string} componentName 組件名稱
 */
function getIndexJs(componentName) {
  return `import ${componentName} from "./${componentName}";
export default ${componentName};
`;
}

這樣就實(shí)現(xiàn)了 rcli g [options] 命令的功能

總結(jié)

api 設(shè)計(jì)是很重要的：好的 api 設(shè)計(jì)能讓使用者更加方便地使用，且變動(dòng)少

當(dāng)自己想不到該怎么設(shè)計(jì) api 時(shí)，可以參考別人的 api，看看別人是怎么設(shè)計(jì)的好用的

云服務(wù)器 GPU云服務(wù)器命令行工具 php命令行工具命令行ddos工具linux 服務(wù)器命令行管理工具

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100082.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

WelliJhon

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow算法

閱讀 1255·2023-04-25 18:57
tensor.unsqueeze

閱讀 2142·2023-04-25 16:28
ffmpeg獲取視頻截圖

閱讀 3947·2021-11-24 09:39
如何識(shí)別圖片文字，PaddleOCR機(jī)器學(xué)習(xí)開(kāi)源項(xiàng)目使用 | 機(jī)器學(xué)習(xí)

閱讀 3641·2021-11-16 11:45
【Python爬蟲(chóng)】手把手帶你爬下肯德基官網(wǎng)（ajax的post請(qǐng)求）

閱讀 1831·2021-10-13 09:40
組件設(shè)計(jì)漫談

閱讀 1272·2019-08-30 15:52
彈性盒模型

閱讀 1725·2019-08-30 10:57
Canvas + WebSocket + Redis 實(shí)現(xiàn)一個(gè)視頻彈幕

閱讀 671·2019-08-29 16:55

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

用 nodejs 寫一個(gè)命令行工具：創(chuàng)建 react 組件的命令行工具

使用 create-react-app 來(lái)創(chuàng)建一個(gè)應(yīng)用

生成純組件（繼承自 PureComponent，以提高性能）

生成類組件（有狀態(tài)組件）

生成函數(shù)組件（無(wú)狀態(tài)組件）

生成組件不在文件夾內(nèi)（也不包含 css 文件和 index.js 文件）

相關(guān)文章

GitHub 值得收藏的前端項(xiàng)目[每月更新...]

**webpack工程化集成React技術(shù)棧（一）**

react+express項(xiàng)目

發(fā)表評(píng)論

0條評(píng)論

WelliJhon

男|高級(jí)講師

TA的文章

tensorflow算法

tensor.unsqueeze

ffmpeg獲取視頻截圖

如何識(shí)別圖片文字，PaddleOCR機(jī)器學(xué)習(xí)開(kāi)源項(xiàng)目使用 | 機(jī)器學(xué)習(xí)

【Python爬蟲(chóng)】手把手帶你爬下肯德基官網(wǎng)（ajax的post請(qǐng)求）

組件設(shè)計(jì)漫談

彈性盒模型

Canvas + WebSocket + Redis 實(shí)現(xiàn)一個(gè)視頻彈幕

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

用 nodejs 寫一個(gè)命令行工具 ：創(chuàng)建 react 組件的命令行工具

使用 create-react-app 來(lái)創(chuàng)建一個(gè)應(yīng)用

生成純組件（繼承自 PureComponent，以提高性能）

生成類組件（有狀態(tài)組件）

生成函數(shù)組件（無(wú)狀態(tài)組件）

生成組件不在文件夾內(nèi)（也不包含 css 文件和 index.js 文件）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

用 nodejs 寫一個(gè)命令行工具：創(chuàng)建 react 組件的命令行工具

生成純組件（繼承自 PureComponent，以提高性能）