上週,同事抱怨說 react 怎麼不能像 angular 那樣,使用命令行工具來生成一個組件。對呀,平時工做時,想要建立一個 react 的組件,都是直接 copy 一個組件,而後作一些修改。爲何不能將這個過程交給程序去作呢?當天晚上,我就仿照 angular-cli 的 api,寫了一個生成 react 組件的命令行工具 rcli。在這裏記錄一下實現的過程。javascript
rcli new PROJECT-NAME
命令,建立一個 react 項目,其中生成項目的腳手架固然是 create-react-app 啦rcli g component MyComponent
命令, 建立一個 MyComponent
組件, 這個組件是一個文件夾,在文件夾中包含 index.js
、MyComponent.js
、MyComponent.css
三個文件 後來發現 rcli g component MyComponent
命令在 平時開發過程當中是不夠用的,由於這個命令只是建立了一個類組件,且繼承自 React.Component
。css
在平時開發 過程當中,咱們會用到這三類組件:html
React.Component
的類組件React.PureComponent
的類組件注: 未來可使用 Hooks 來代替以前的類組件java
因而就有了 0.2.0 版本的 rcli
node
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
安裝依賴react
rcli new PROJECT-NAME --use-npm
cd PROJECT-NAME
npm start
複製代碼
rcli g -c MyNewComponent -p
複製代碼
rcli g -c MyNewComponent
複製代碼
等於:git
rcli g -c ./MyNewComponent
複製代碼
rcli g -c MyNewComponent -s
複製代碼
# 默認生成的組件都會都包含在文件夾中的,若不想生成的組件被文件夾包含,則加上 --no-folder 選項
rcli g -c MyNewComponent --no-folder
複製代碼
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
命令直接進行測試 ~rcli
會依賴一些包: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
的功能:github
#!/usr/bin/env node
表示使用 node 執行本腳本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]
命令的功能