reactcciダウンロードreactcciソースコードのダウンロード

reactcci

サードパーティ製コンポーネント

1.0.0

ダウンロード

反応コンポーネントインタラクティブCLIを作成します

あなた自身の構造でネイティブコンポーネントを反応または反応するCLI

プラグアンドプレイ：TypeScriptを使用したCRAのインスタント構成
簡単に構成できます：インタラクティブな構成とシンプルなテンプレート
優れたドキュメント：当社のウェブサイトの詳細
タイプスクリプト、ストーリーブック、redux、jest、...
軽量： <40kb + 3小さなライブラリ
高速検索：動的検索による新しいコンポーネントの非常に高速選択場所
たくさんのコマンド：マルチ作成機能による大量のファイル
Reactのために作成： Plop 、 Hygen 、または足場ライブラリよりも優れています。
マルチプラットフォーム：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

config

最初の実行では、CLIが自動構成について尋ねます。コマンドを実行するだけです：
npx rcci
このコマンドは、基本的なテンプレートセットを備えたファイルrcci.config.jsとテンプレートフォルダーを作成します。

構成ファイルには次のパラメーターが含まれます。

folderPath
コンポーネントを配置するルートディレクトリ、またはパスの配列
デフォルト： src/
templatesFolder
独自のコンポーネントテンプレートへのパス
デフォルト： templates
multiProject
いくつかのプロジェクトでMono-Repositoryの構成を設定できます
デフォルト： 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-moduleのインポート
#STORY_PATH#ストーリーブックタイトルの

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`
`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などのオプションファイルを作成し、インデックスで2番目のタイプのコンポーネントを選択します
--project 、 -p
マルチプロジェクトモードでプロジェクトを設定します
--sls
構成ファイルの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'
                }
            }
        }
    ]
}