React के लिए अपना CLI लिखना

यदि आप हर बार प्रतिक्रिया में एक नया घटक बनाते हैं तो Ctrl+C करते हैं, तो यह लेख आपके लिए है!

प्रतिक्रिया का अपना सीएलआई नहीं है, और यह समझ में आता है कि क्यों। घटक की संरचना को कैसे देखना चाहिए, इसके लिए कोई विशिष्ट नियम नहीं हैं, प्रलेखन में केवल सामान्य सिफारिशें हैं। सभी डेवलपर्स एक ऐसी संरचना का उपयोग करते हैं जिसने अपनी टीम में जड़ें जमा ली हैं। और कभी-कभी आपको विभिन्न शैलियों में परियोजनाओं का समर्थन करना पड़ता है।

संरचना स्वयं भी उपयोग किए गए स्टैक पर निर्भर करती है:

• शैलियाँ - स्टाइल, एससीएस मॉड्यूल, सीएसएस;
• टाइपस्क्रिप्ट या जावास्क्रिप्ट;
• परीक्षण

नए घटक बनाते समय आपके जीवन को आसान बनाने के कई तरीके हैं। उदाहरण के लिए, आप अपने विकास के वातावरण में टेम्पलेट बना सकते हैं (उदाहरण के लिए, WebStorm में)। लेकिन आज हम देखेंगे कि कमांड लाइन से कंपोनेंट कंपोनेंट कैसे बनाया जाता है। लेख के अंत में, हम एक एकल कमांड के साथ घटक बनाने में सक्षम होंगे। उदाहरण के लिए, जैसे:

 npm run create components/Home/ComponentName 

ट्रेनिंग

प्रोजेक्ट बनाने के लिए हम Create React App का उपयोग करेंगे ।

एक परियोजना बनाएँ:

 npx create-react-app react-cli 

हमारे सभी कोड एक फ़ाइल में संग्रहीत किए जाएंगे। हम अपने प्रोजेक्ट के रूट में cli फ़ोल्डर बनाते हैं, और इसके अंदर create.js फ़ाइल बनाते हैं।

काम करने के लिए, हमें 3 मॉड्यूल चाहिए, हम उन्हें अपनी फ़ाइल में आयात करते हैं।

 // cli/create.js const fs = require('fs'); const path = require('path'); const minimist = require('minimist'); 

fs - फाइल सिस्टम के साथ काम करने के लिए मॉड्यूल।

पथ - फ़ाइल पथ प्रसंस्करण के लिए मॉड्यूल।

न्यूनतावादी - कमांड लाइन से तर्कों को परिवर्तित करने के लिए एक मॉड्यूल।

तर्कों के साथ काम करें

एक घटक बनाने के लिए, हमें कमांड लाइन के लिए पथ के नाम और घटक को पास करना होगा। हम इस जानकारी को एक पंक्ति ( उदाहरण के लिए, components/folder1/folder2/Menu ) में स्थानांतरित करेंगे, जिसे हम पथ और नाम के लिए पार्स करते हैं।

सभी तर्क process ऑब्जेक्ट से प्राप्त किए जा सकते हैं। मान लीजिए कि हम कंसोल में निम्नलिखित लाइन दर्ज करते हैं:

 node cli/create.js --path components/folder/Menu 

नतीजतन, हम प्राप्त करते हैं:

 console.log(process.argv); // [ // '/usr/local/bin/node', // '/Users/a17105765/projects/react-cli/cli/create.js', // '--path', // 'components/folder/Menu' // ] 

न्यूनतम मॉड्यूल का उपयोग करके, हम तर्कों को एक वस्तु में बदल सकते हैं:

 // cli/create.js // ... const args = minimist(process.argv); console.log(args); // { // _: [ // '/usr/local/bin/node', // '/Users/a17105765/projects/react-cli/cli/create.js' // ], // path: 'components/folder/Menu' // } 

महान, आप पहले से ही इसके साथ काम कर सकते हैं।

निर्देशिका बनाना

सबसे पहले, आवश्यक चर तैयार करें। हमें अपनी परियोजना के src फ़ोल्डर के लिए पूर्ण पथ, एक सरणी के रूप में तर्कों से पथ और घटक के नाम की आवश्यकता है।

 // cli/create.js // ... //     src   const srcPath = [__dirname, '..', 'src']; //         const arrPath = args.path.split('/'); //     ( ) const componentName = arrPath[arrPath.length - 1]; 

मान लीजिये कि हमने एक अविचल मार्ग का संकेत दिया है। अच्छे तरीके से, हमें ये सभी सबफ़ोल्डर्स बनाने चाहिए अगर वे नहीं हैं। तो चलिए करते हैं।

 // cli/create.js // ... //     ( ) const currentArray = []; arrPath.forEach(element => { currentArray.push(element); const currentResolvePath = path.resolve(...srcPath, ...currentArray); if (!fs.existsSync(currentResolvePath)) { //  -     ? fs.mkdirSync(currentResolvePath); //  ,    } }); 

यहां हम पथ के सभी तत्वों के माध्यम से लूप करते हैं और यदि आवश्यक हो, तो mkdirSync विधि का उपयोग करके एक निर्देशिका बनाएं। इससे पहले, हम रिज़ॉल्यूशन विधि का उपयोग करके घटक को एक पंक्ति में सामान्य करते हैं। इन ऑपरेशनों को करने के बाद, हम आवश्यक निर्देशिका संरचना बनाएंगे।

टेस्ट लिखा गया। हम कमांड लाइन में निम्नलिखित कमांड दर्ज करते हैं (उसी समय, हमारे पास अभी तक src फ़ोल्डर में कोई निर्देशिका नहीं है):

 node cli/create.js --path components/A/B/C/D/E/CustomComponent 

और हमें निम्नलिखित परिणाम मिलते हैं:

घटक फ़ाइलें बनाना

अच्छी तरह से किया, किया, वह सब जो घटक फाइलें बनाना है।

हम सबसे सरल घटक संरचना का उपयोग करेंगे:

• शैलियों के लिए सादे सीएसएस
• टीएस के बिना
• कोई परीक्षण नहीं
• कार्यात्मक घटक

यह पता चला है कि हमें 3 फाइलें बनाने की आवश्यकता है।

1. घटक टेम्पलेट

 import React from 'react'; import './CustomComponent.css'; const CustomComponent = () => { return ( <div className="wrapper"> </div> ); }; export default CustomComponent; 

2. सूचकांक फ़ाइल टेम्पलेट

 export { default } from './CustomComponent'; 

3. शैली फ़ाइल टेम्पलेट

 .wrapper {} 

आरंभ करने के लिए, आइए एक चर में घटक (घटक के व्यक्तिगत फ़ोल्डर सहित) को पूरा रास्ता दें:

 // cli/create.js // ... const componentPath = [...srcPath, ...arrPath]; 

नई फाइल writeFileSync का उपयोग करके बनाई गई है, जो फ़ाइल पथ और सामग्री को ले जाती है।

एक घटक फ़ाइल बनाना:

 // cli/create.js // ... const componentCode = `import React from 'react'; import './${componentName}.css'; const ${componentName} = () => { return ( <div className="wrapper"> </div> ); }; export default ${componentName};`; fs.writeFileSync(path.resolve(...componentPath, `${componentName}.jsx`), componentCode); 

एक अनुक्रमणिका फ़ाइल बनाना:

 // cli/create.js // ... const indexCode = `export { default } from './${componentName}';`; fs.writeFileSync(path.resolve(...componentPath, 'index.js'), indexCode); 

एक स्टाइलशीट बनाना:

 // cli/create.js // ... const styleCode = '.wrapper {}'; fs.writeFileSync(path.resolve(...componentPath, `${componentName}.css`), styleCode); 

हो गया!

अब देखते हैं क्या हुआ।

 // cli/create.js const fs = require('fs'); //       const path = require('path'); //     const minimist = require('minimist'); //        const args = minimist(process.argv); const srcPath = [__dirname, '..', 'src']; //    src   const arrPath = args.path.split('/'); //         const componentName = arrPath[arrPath.length - 1]; //   -   //     ( ) const currentArray = []; arrPath.forEach(element => { currentArray.push(element); const currentResolvePath = path.resolve(...srcPath, ...currentArray); if (!fs.existsSync(currentResolvePath)) { //  -     ? fs.mkdirSync(currentResolvePath); //  ,    } }); const componentPath = [...srcPath, ...arrPath]; //   const componentCode = `import React from 'react'; import './${componentName}.css'; const ${componentName} = () => { return ( <div className="wrapper"> </div> ); }; export default ${componentName};`; fs.writeFileSync(path.resolve(...componentPath, `${componentName}.jsx`), componentCode); //    const indexCode = `export { default } from './${componentName}';`; fs.writeFileSync(path.resolve(...componentPath, 'index.js'), indexCode); //    const styleCode = '.wrapper {}'; fs.writeFileSync(path.resolve(...componentPath, `${componentName}.css`), styleCode); 

यह केवल 43 पंक्तियों में बदल गया, टिप्पणियों को ध्यान में रखते हुए, ऐसी उपयोगी चीज के लिए बुरा नहीं है!

अब एक घटक बनाने की कोशिश करते हैं:

 node cli/create.js --path components/folder1/folder2/Button 

सब कुछ काम कर गया! अंतिम स्पर्श है ...

Package.json में एक कमांड जोड़ना

कमांड को package.json फ़ाइल में जोड़ें ताकि हर बार जब हम स्क्रिप्ट पर पथ न लिखें

 { "name": "react-cli", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.12.0", "react-dom": "^16.12.0", "react-scripts": "3.2.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "create": "node cli/create.js --path" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } 

अब इसके बजाय:

 node cli/create.js --path components/folder1/folder2/Button 

हम सिर्फ लिख सकते हैं

 npm run create components/folder1/folder2/Button 

परियोजना के स्रोत कोड को जीथब पर देखा जा सकता है