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'
                }
            }
        }
    ]
}