- 原文地址：Create React Components from The Command Line with Agrippa
- 原文作者：Nathan Sebhastian
- 译文出自：掘金翻译计划
Agrippa 它是一个开发工具，就是可以让你在命令行创建React组件。它能大大减少在创建React组件时需要编写的模板代码。
模板代码是组件的内容，在项目里引用。一次编写，可以在项目各个地方进行使用
下面是模板代码例子，当创建一个React组件时，编写如下代码，先是import导入依赖组件或文件，而后是编写组件内容，export将自己组件内容导出。
import React from 'react';
import propTypes from 'prop-types';
import './App.module.css';
export const App = () => {
return <h1>Hello world!</h1>;
};
App.propTypes = {};
复制代码你可以使用 TypeScript 而不需要 PropTypes，App为你自定义的组件名，函数体编写你的模板代码部分
Agrippa要做的，就是通过它的命令行指令来生成 React 组件也就是生成这这模板代码，你可以创建一个 React 组件，但无需自己编写模板部分。
Agrippa 与 Bit 的“Generator”功能非常相似，而两者其实是有根本的区别的。
Bit 是一种用于组件驱动开发的工具，它的在于管理独立组件的工作区。而Agrippa 与开发策略或项目架构无关。
开始使用 Agrippa 并创建 React App
开始使用 Agrippa之前，您可以使用 NPM 安装 agrippa 包或使用 NPX 直接使用：
npm install -g agrippa
# or
yarn global add agrippa
# or
npx agrippa
复制代码Agrippa 只有两个命令：
generate(简写gen) 用来生成组件init用来生成配置
等会再看 Agrippa 配置。现在先新建一个 React 项目，测试下 generate 命令。
npx create-react-app example-app
cd example-app
复制代码现在已经有了react项目，开始使用 Agrippa。我们去创建一个名为 Button 的新组件，如下所示。请注意，您可以使用 generate 或 gen 命令：
agrippa generate button
# or
npx agrippa generate button
复制代码它会直接在根目录创建这个组件文件夹，如下所示：
example-app
├── Button
│ └── index.jsx
├── README.md
├── package-lock.json
├── package.json
└── src
复制代码你可以打开Button/index.jsx查找以下内容：
import React from 'react';
export const Button = () => {
return (
<div />
);
}
复制代码如果你可能希望在/src甚至/src/components目录内生成组件。
你可以在generate命令中添加一个--base-dir或--destination选项来指定目录，内容如下：
agrippa generate button --destination src
复制代码现在，Button组件将在/src文件夹内生成
Agrippa 也有一些选项，您可以添加这些选项来生成具有不同成分的组件。
例如，你可以使用--styling css选项生成包含.css文件的组件：
agrippa generate button --styling css
复制代码Agrippa 还附带一些智能默认值，以便它会为您的开发环境生成正确的组件。当您使用类型脚本时，它会生成一个.tsx组件，而不是一个.jsx组件。
该工具会在项目自动检索tsconfig.json文件，它来去判断你是否是使用的 TypeScript。
当你在项目中使用 TypeScript 时，下面是同一Button组件的index.tsx文件内容：
export interface ButtonProps {}
export const Button: React.VFC<ButtonProps> = () => {
return (
<div />
);
}
复制代码除此之外，你也可以添加--typescript --ts选项，来强制 Agrippa 生成基于类型脚本的组件。
当生成新组件时，你还可以通过添加 - --props prop-types选项将PropTypes添加到组件中。
这里可以查看完整指令项Agrippa generate command options.
接下来，让我们来看看Agrippa的init命令是来干嘛的。
使用 init 命令创建 Agrippa 配置文件
init命令允许您创建配置文件，因此你不用每次生成新的React组件的时后，命令后都加上相同的配置项。
配置文件是一个 Json 文件，名为.agripparc.json
比如，大多数时候，您都希望在/src 或/src/components目录中生成组件。
当您使用generate命令时，无需添加--base-dir选项，则 Agrippa 将生成组件在当前工作目录中（该目录通常默认是项目根目录中）
因此我们会这样添加--base-dir选项，如下：
agrippa generate footer --base-dir ./src
复制代码生成新组件时可能需要包括的另一个选项是styling选项。如果你的项目使用 CSS 模块，那么你的所有组件都可能使用 CSS 模块。
由于 Agrippa 的默认styling选项none，因此在生成新组件时，你都需要配置该选项，具体如下：
agrippa generate footer --styling css
复制代码但是，有个问题，我们每次创建组件都要写上--styling和 ---base-dir选项。
agrippa generate footer --base-dir ./src --styling css
agrippa generate header --base-dir ./src --styling css
agrippa generate button --base-dir ./src --styling css
agrippa generate link --base-dir ./src --styling css
复制代码所以我们需要.agripparc.json来做统一配置来解决上述问题。
你可以将这些选项添加到下文所示的.agripparc.json而不是在每次生成新组件时都包含相同的选项：
{
"baseDir": "./src",
"styling": "css"
}
复制代码现在，styling和baseDir选项设置在配置文件中，只需在生成新组件时需要组件的名称：
agrippa generate footer
agrippa generate header
agrippa generate button
复制代码使用 Agrippa 配置文件后，你就不必每次创建generate命令时编写相同的重复选项了。
总结
Agrippa 是一个不错的 命令行 工具，它允许你直接指令生成React组件。学习简单，赶快使用到新的或现有的项目中吧。
它呢还附带了很多的选项，来帮助你的项目生成正确的组件。你还可以创建一个配置文件，以避免每次生成新组件时添加相同的选项。
Agrippa还包括一些智能默认。例如，当您使用generate命令时，它会自己检测你使用的是不是 TypeScript。如果是的话，它将生成一个.tsx组件文件，而不是一个.jsx文件。
未来 Agrippa 中将会有更多功能，包括使用styled-components进行组件样式选项的能力。
如果您有兴趣了解有关该工具的更多信息或有一些有用的建议，请务必查看Agrippa 的 GitHub 存储库.