reactcci 다운로드 reactcci 소스 코드 다운로드

reactcci

타사 구성 요소

1.0.0

다운로드

반응 구성 요소 대화식 CLI 생성

CLI는 자신의 구조로 기본 구성 요소를 반응 하거나 반응하는 CLI

플러그 앤 플레이 : 타임 스크립트가있는 CRA에 대한 인스턴트 구성
쉽게 구성 할 수 있습니다 : 대화식 구성 및 간단한 템플릿
훌륭한 문서 : 웹 사이트에 대한 추가 정보
무엇이든 작업 : Typescript, Storybook, Redux, Jest, ...
경량 : <40KB + 3 개의 작은 라이브러리
빠른 검색 : 동적 검색으로 새로운 구성 요소를위한 매우 빠른 선택 장소
하나의 명령으로 많이 : 다중 생성 기능에 의한 많은 파일
React를 위해 만들어진 : PLOP , HYGEN 또는 SCAFFOLDING 라이브러리보다 더 나은 REACT를위한 것이기 때문입니다.
Multiplatform : MacOS, Windows 및 Linux에서 작동합니다.
vscode 확장
웹 스톰 통합

사용

빠른 개요

원사 및 대화식 모드를 통해

 $ 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

구성

첫 번째 실행시 CLI는 자동 구성에 대해 묻습니다. 명령을 실행합니다.
npx rcci
이 명령은 파일 rcci.config.js 및 기본 템플릿 세트가있는 템플릿 폴더를 만듭니다.

구성 파일에는 다음 매개 변수가 포함됩니다.

folderPath
구성 요소 또는 경로 배열을 배치하는 루트 디렉토리
기본값 : src/
templatesFolder
자신의 구성 요소 템플릿으로가는 길
기본값 : templates
multiProject
여러 프로젝트로 모노 리포지토리에 대한 구성을 설정할 수 있습니다.
기본값 : false
skipFinalStep
마지막 확인 단계를 끄면 전환 할 수 있습니다
기본값 : false
checkExistenceOnCreate
교체를 피하기 위해 CREATE에서 확인 구성 요소 존재를 켜질 수 있습니다.
기본값 : 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# Storybook 제목의#

afterCreation
생성 후 파일을 처리 할 스크립트가있는 객체
기본값 : undefined
예:

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

자리 소유자

각 자리 표시자는 자신의 자리 표시자를 구축하기 위해 일부 데이터를 얻는 기능입니다.
다중 구성 요소 생성 동안 모든 단일 구성 요소마다 모든 기능이 호출됩니다.
예:

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

이 설정 후 템플릿 파일 내부에서 #NAME# 로이 자리 표시자를 사용할 수 있습니다.
아래에서 사용 가능한 모든 데이터 및 기능 목록을보고 새 데이터를 생성 할 수 있습니다.

필드	설명
`project`	multy project 모드의 프로젝트 이름
`componentName` , `objectName`	Multi-Template 모드에서 구성 요소 또는 다른 객체의 이름
`objectType`	사용자가 선택한 객체의 유형. 기본적으로 `component` 입니다.
`pathToObject`	객체 폴더로가는 경로 예 : `src/components`
`destinationFolder`	생성되고있는 객체 폴더에 대한 상대 경로 예 : `App/Header/Logo`
`objectFolder`	객체 (구성 요소) 폴더에 대한 절대 경로
`relativeObjectFolder`	객체 (구성 요소) 폴더에 대한 상대 경로
`filePrefix`	파일 이름의 처리 된 객체 (구성 요소) 이름
`folderName`	처리 된 객체 (구성 요소) 폴더의 이름입니다
`files`	생성되는 파일의 객체
`getRelativePath(to: string)`	다른 경로로 상대적인 경로를 얻는 기능 예 : `../../src/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
구성 파일에서 skipFinalStep 같은 마지막 계약 단계를 건너 뛰려면

멀티 테일 플레이트

구성 요소가 아닌 다른 것을 생성 해야하는 경우 템플릿 배열을 설정할 수 있습니다.
벨로우즈 예 :

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