Strap

简单的React组件模板生成器

用于启动react组件模板的命令行工具。

快速开始

通过NPM安装

# yarn
$ yarn global add strap

# npm
$ npm i -g strap

cd 进入项目目录，然后运行 strap Button 以生成模板代码。

您的项目现在将在 src/components/Button 处有一个新的目录。此目录包含两个文件

// `Button/index.js`

export { default } from "./Button";

// `Button/Button.js`

import React from "react";

export default function Button() {
  return <></>;
}

自定义模板

可以提供具有模板类型的自定义模板。文件或目录的名称应为函数组件或类组件的 functional 或 class。

自定义模板可以通过两种方式提供

文件

可以通过提供自定义模板来自定义模板。您需要添加以下两个文件，其中包含 _component 占位符，该占位符将被组件名称替换。

// functional.js

import React from "react";

function _component() {
  return <></>;
}

export default _component;

// class.js

import React from "react";

class _component {
  render() {
    return <></>;
  }
}

export default _component;

Strap 将在 src/components/.templates 目录中查找自定义模板。模板路径可以通过 templateDirectory 在 strap-config.json 中进行自定义。

目录

如果有多个文件，可以使用组件类型名称的目录代替。要用组件名称替换文件名，请使用 _component.js 作为文件名。

// index.js

export { default } from "_component.js";

// _component.js
import React from "react";

export default function _component() {
  return <></>;
}

Strap 将创建一个与组件名称相同的目录，并将每个文件放入其中。每个文件中的 _component 实例都将被组件名称替换。

配置

strap-config.json 可用于更改默认值。要生成配置文件，请使用 strap --init 命令。

| 属性 | 默认值 | 概述 | 类型 | | ------------- | -------------------------- | -------------------------------------------------------------------- | ------ | ---------- | ------ | | basePath | src/components | 组件生成的基本目录 | string | | templatesDir | src/component/.templates | 查找模板目录的路径 | string | | componentType | func | 如果未指定类型标志，将生成的组件类型 | func | functional | class | | verboseOutput | false | 是否显示详细输出 | bool |

示例

嵌套路径

strap Hello/World/按钮

类组件

strap Button -c 或 strap Button --class