内容简介:上周,同事抱怨说 react 怎么不能像 angular 那样,使用命令行工具来生成一个组件。对呀,平时工作时,想要创建一个 react 的组件,都是直接 copy 一个组件,然后做一些修改。为什么不能将这个过程交给程序去做呢?当天晚上,我就仿照angular-cli 的 api,写了一个生成 react 组件的命令行工具后来发现在平时开发 过程中,我们会用到这三类组件:
上周,同事抱怨说 react 怎么不能像 angular 那样,使用命令行 工具 来生成一个组件。对呀,平时工作时,想要创建一个 react 的组件,都是直接 copy 一个组件,然后做一些修改。为什么不能将这个过程交给程序去做呢?当天晚上,我就仿照angular-cli 的 api,写了一个生成 react 组件的命令行工具 rcli 。在这里记录一下实现的过程。
api 设计
0.1.0 版本的 rcli 参照 angular-cli 的设计,有两个功能:
-
使用
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
。
在平时开发 过程中,我们会用到这三类组件:
React.Component React.PureComponent
注: 将来可以使用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,看看别人是怎么设计的好用的
以上所述就是小编给大家介绍的《用 nodejs 写一个命令行工具 :创建 react 组件的命令行工具》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Linux 命令记不住?试试这款 Linux 命令大全搜索工具
- Linux 命令记不住?试试这款 Linux 命令大全搜索工具
- 密码管理工具(命令行)
- 那些迷人的命令行工具
- 一些命令行工具的增强版
- 如何使用 Go 开发命令行工具
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Google 广告高阶优化(第3版)
【美】Brad Geddes(布兰德.盖兹) / 宫鑫、康宁、王娜 / 电子工业出版社 / 2015-9 / 99.00元
《Google 广告高阶优化(第3版)》可以说是Google AdWords的终极指南,内容非常丰富,第三版在内容上进行了全面更新。介绍了AdWords的最新最完整的功能,阐释其工作原理,也提供了相应的优化方法、策略和实践教程,读者可以随时在自己的PPC广告系列中进行实践。第三版增添了50多页新内容,涵盖Google系统最近的所有变动,包括广告系列结构的变化、出价调整器、重定向、视频广告功能、全新......一起来看看 《Google 广告高阶优化(第3版)》 这本书的介绍吧!