reactcci下载 - reactcci源代码下载

reactcci

三方组件

1.0.0

下载

React创建组件交互式CLI

CLI与您自己的结构创建或编辑反应或反应本机组件

插件：带有打字稿的CRA的即时配置
易于配置：交互式配置和简单的模板
很棒的文档：我们网站上的更多信息
与任何事物一起工作：打字稿，故事书，redux，jest，...
轻量级： <40kb + 3个小图书馆
快速搜索：通过动态搜索为新组件的非常快的选择位置
一项命令：多创建功能的大量文件
为React创建：比Plop ， Hygen或任何脚手架库更好，因为它是用于React的
多页贴：在MacOS，Windows和Linux上工作。
VSCODE扩展
WebStorm集成

使用

快速概述

通过纱线和交互式模式

 $ yarn add -D reactcci
$ yarn rcci

或通过NPM和标志

 $ npm i -D reactcci
$ npx rcci --name Header Body Footer --dest src/App

安装

通过NPM安装：
npm install --save-dev reactcci

通过纱线安装：
yarn add --dev reactcci

config

在第一次运行时，CLI会询问您有关自动配置的信息。只需运行一个命令：
npx rcci
此命令使用基本模板设置创建文件rcci.config.js和模板文件夹。

配置文件包含下一个参数：

folderPath
根目录将您的组件或路径数组放置
默认： src/
templatesFolder
通往自己组件模板的路径
默认值： templates
multiProject
允许您通过几个项目设置单声道申请书的配置
默认值： false
skipFinalStep
允许您关闭上次检查步骤
默认值： false
checkExistenceOnCreate
允许您在创建上打开检查组件的存在，以避免更换
默认值： false
templates
具有组件结构的对象
processFileAndFolderName
字符串或函数允许您将组件名称重新映射到文件夹名称和文件名前缀
默认值： PascalCase
类型：
- camelCase
- PascalCase
- snake_case
- dash-case
- (name: string, parts: string[], isFolder: boolean) => string
例子：
```
 {
    ... config ,
    processFileAndFolderName : ( name , parts , isFolder ) => 
        isFolder ? name : parts . map ( ( part ) => part . toLowerCase ( ) ) . join ( '-' )
}
```
placeholders
您可以用来构建自己的组件模板的占位符列表
默认：
#NAME#
#STYLE#用于CSS模块导入
#STORY_PATH# for Storybook标题

afterCreation
用脚本进行对象来处理您在创建之后提交的对象
默认值： undefined
例子：

 {
    ... config ,
    afterCreation : {                
        prettier : {
            extensions : [ '.ts' , '.tsx' ] , // optional
            cmd : 'prettier --write [filepath]'
        }
    }
}

占位符

每个占位符都是一个获取一些数据来构建您自己的占位符的函数。
在多组件创建期间，每个组件都将调用所有功能。
例子：

placeholders: {
    NAME : ( { componentName } ) => componentName
}

设置此之后，您可以在模板文件中使用#NAME#使用此占位符。
在下面，您可以看到所有可用数据和功能的列表以创建一个新的数据。

场地	描述
`project`	项目名称以多项目模式
`componentName` ， `objectName`	组件或其他对象的名称在多模式模式下
`objectType`	用户选择的对象类型。默认情况下是`component` 。
`pathToObject`	对象文件夹的路径示例： `src/components`
`destinationFolder`	要创建的对象文件夹的相对路径示例： `App/Header/Logo`
`objectFolder`	绝对通往对象（组件）文件夹的路径
`relativeObjectFolder`	对象（组件）文件夹的相对路径
`filePrefix`	已处理的对象（组件）文件名称
`folderName`	处理的对象（组件）文件夹名称
`files`	正在创建的文件对象
`getRelativePath(to: string)`	功能以获取到任何其他路径的相对路径示例： `../../src/helpers` helpers
`join(...parts: string)`	函数以加入路径的一部分。例子： `join(project, destinationFolder, componentName)` => `Project/Footer/Email`
`stringToCase(str: string, toCase: string)`	功能以将任何字符串映射到情况。例子： `stringToCase('dash-case-string', 'PascalCase')` => `DashCaseString`

争论

--update ， -u
激活更新模式以将新文件添加到组件或替换现有
--dest ， -d
设置绝对或目标路径以创建或更新组件
--skip-search ， -s
跳过交互式文件夹选择以使用dest参数
--name ， -n
设置组件名称或除以空间的名称以创建多个
--files ， -f
要设置文件以创建或更新，而是交互式选择
示例： --files style test component[1]
将创建style和test类的可选文件，并将选择第二种类型的组件
--project ， -p
以多项目模式设置项目
--sls
跳过config文件中的skipFinalStep之类的最后一致步骤

多模板

如果您需要生成其他内容，而不仅仅是组件，则可以设置模板数组。
示例Bellow：

 {
    ... config ,
    templates : [
        {
            name : 'component' , // will be added to default folderPath folder
            files : {
                index : {
                    name : 'index.ts' ,
                    file : 'component.ts'
                }
            }
        } ,
        {
            name : 'service' ,
            folderPath : 'services/' , // will be added by the specific path
            files : {
                index : {
                    name : 'index.ts' ,
                    file : 'service.ts'
                }
            }
        }
    ]
}