reactcci
1.0.0
CLI لإنشاء أو تحرير التفاعل أو رد فعل المكونات الأصلية مع هيكلك الخاص
عبر الغزل والوضع التفاعلي
$ 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
يتيح لك تشغيل تشغيل وجود مكون على إنشاء لتجنب الاستبدال
الافتراضي: false
templates
كائن بهيكل المكون الخاص بك
processFileAndFolderName
السلسلة أو الدالة التي تسمح لك بإعادة تجهيز اسم المكون إلى اسم المجلد و premix اسم الملف
الافتراضي: PascalCase
الأنواع:
camelCasePascalCasesnake_casedash-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 | اسم المشروع في وضع المشاريع |
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 ، -sdest كما هي--name ، -n--files ، -f--files style test component[1]style test وسيختار النوع الثاني من المكونات عن طريق الفهرس--project ، -p--slsskipFinalStep في ملف التكوين إذا كنت بحاجة إلى إنشاء شيء آخر ، وليس مكونات فقط ، فأنت قادر على إعداد مجموعة من القوالب.
مثال على ذلك:
{
... 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'
}
}
}
]
} 
