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
ช่วยให้คุณเปิดการตรวจสอบส่วนประกอบที่มีอยู่ใน Create เพื่อหลีกเลี่ยงการเปลี่ยน
ค่าเริ่มต้น: false
templates
วัตถุที่มีโครงสร้างขององค์ประกอบของคุณ
processFileAndFolderName
สตริงหรือฟังก์ชั่นที่ช่วยให้คุณสามารถแมปชื่อส่วนประกอบของคุณเป็นคำนำหน้าโฟลเดอร์-ชื่อและชื่อไฟล์ชื่อ
ค่าเริ่มต้น: 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-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 | Path to Objects Folder ตัวอย่าง: 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 as is is--name , -n--files , -f--files style test component[1]style และ test และจะเลือกองค์ประกอบประเภทที่สองตามดัชนี--project , -p--slsskipFinalStep ในไฟล์ config หากคุณต้องการสร้างอย่างอื่นไม่ใช่ส่วนประกอบเท่านั้นคุณสามารถตั้งค่าอาร์เรย์ของเทมเพลตได้
ตัวอย่างร้อง:
{
... 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'
}
}
}
]
} 
