वास्तव में 'रिएक्शन-स्क्रिप्ट्स स्टार्ट' कमांड क्या है?

176

मैं एक रिएक्ट प्रोजेक्ट के साथ काम कर create-react-appरहा हूं और प्रोजेक्ट शुरू करने के लिए मेरे पास दो विकल्प हैं:

पहला तरीका:

npm run startpackage.jsonइस तरह परिभाषा के साथ :

"start": "react-scripts start",

दूसरा तरीका:

npm start

इन दोनों आज्ञाओं में क्या अंतर है? और, इसका उद्देश्य क्या है react-scripts start?

मैंने परिभाषा खोजने की कोशिश की, लेकिन मुझे इस नाम के साथ एक पैकेज मिला। मैं अभी भी नहीं जानता कि इस कमांड का उपयोग क्या है?

reactjs npm

— फेलिप अगस्तो
स्रोत

2

"स्टार्ट" एक स्क्रिप्ट का नाम है, npmआप इस तरह से स्क्रिप्ट चलाते हैं npm run scriptName, इसके npm startलिए भी एक छोटा समय हैnpm run start

— Sagiv bg

3

react-scripts startदेव मोड में रिएक्ट एप्लिकेशन को चलाने के लिए उचित कमांड है। यह कमांड package.json में संग्रहीत है, इसलिए आपको इसे याद करने की आवश्यकता नहीं है और npm run startइसके बजाय बस सामान्य टाइप कर सकते हैं । npm startउत्तरार्द्ध के लिए एक शॉर्टकट है।

— क्रिस जी

149

create-react-app और प्रतिक्रिया-स्क्रिप्ट

react-scriptscreate-react-appस्टार्टर पैक से स्क्रिप्ट का एक सेट है । create-react-app आपको कॉन्फ़िगर किए बिना परियोजनाओं को किक करने में मदद करता है, इसलिए आपको अपने प्रोजेक्ट को स्वयं से सेटअप करने की आवश्यकता नहीं है।

react-scripts startविकास का माहौल तैयार करता है और सर्वर शुरू करता है, साथ ही हॉट मॉड्यूल को फिर से लोड करता है। आप यहां देख सकते हैं कि यह आपके लिए क्या करता है।

आप बॉक्स से बाहर की सुविधाओं के बाद बनाने के लिए प्रतिक्रिया-एप्लिकेशन के साथ है ।

प्रतिक्रिया, JSX, ES6 और फ्लो सिंटैक्स समर्थन।

ES6 से परे भाषा एक्स्ट्रा कलाकार की तरह ऑब्जेक्ट फैलता है।

स्वत: उपसर्ग सीएसएस, ताकि आप की जरूरत नहीं है -webkit- या अन्य उपसर्ग।

कवरेज रिपोर्टिंग के लिए अंतर्निहित समर्थन के साथ एक तेज इंटरैक्टिव इकाई परीक्षण धावक।

एक लाइव विकास सर्वर जो सामान्य गलतियों के बारे में चेतावनी देता है।

जेएस, सीएसएस और उत्पादन के लिए छवियों को हैश और सोर्समैप के साथ बनाने के लिए एक स्क्रिप्ट का निर्माण करें।

एक ऑफ़लाइन-प्रथम सेवा कार्यकर्ता और एक वेब ऐप प्रकट होता है, जो सभी प्रगतिशील वेब ऐप मानदंडों को पूरा करता है।

एकल निर्भरता के साथ उपरोक्त उपकरणों के लिए परेशानी रहित अपडेट।

एनपीएम स्क्रिप्ट

npm startके लिए एक शॉर्टकट है npm run start।

npm runका उपयोग स्क्रिप्ट को चलाने के लिए किया जाता है जिसे आप scriptsअपने पैकेज के ऑब्जेक्ट में परिभाषित करते हैं

अगर startस्क्रिप्ट ऑब्जेक्ट में कोई कुंजी नहीं है , तो यह डिफ़ॉल्ट होगाnode server.js

कभी-कभी आप प्रतिक्रिया स्क्रिप्ट से अधिक करना चाहते हैं जो आपको देता है, इस मामले में आप कर सकते हैं react-scripts eject। यह आपकी परियोजना को "प्रबंधित" स्थिति से एक प्रबंधित प्रबंधित स्थिति में परिवर्तित नहीं करेगा, जहां आपके पास निर्भरता पर पूर्ण नियंत्रण है, स्क्रिप्ट और अन्य कॉन्फ़िगरेशन का निर्माण करते हैं।

— ल्यूक
स्रोत

क्या आप जानते हैं कि इसे उत्पादन पर कैसे चलाना है?

— user269867

10

इसे प्रोडक्शंस में उपयोग करने के लिए आप कहेंगे npm run build। यह एक बिल्ड फ़ोल्डर बनाएगा। यह फ़ोल्डर तब आप सेवा कर सकते हैं। उदा। npm install -g serveऔर फिर serve -s build facebook.github.io/create-react-app/docs/deployment

— ल्यूक

पहले तीन लिंक एक ही URL से लिंक होते हैं।

— एंड्रयू ग्रिम

दूसरे लिंक को "क्या शामिल किया गया है"

— ल्यूक

64

जैसा कि Sagiv bg ने बताया है, npm startकमांड एक शॉर्टकट है npm run start। मैं इसे थोड़ा और स्पष्ट करने के लिए वास्तविक जीवन का उदाहरण जोड़ना चाहता था ।

नीचे सेटअप create-react-appgithub रेपो से आता है । package.jsonस्क्रिप्ट जो वास्तविक प्रवाह को परिभाषित का एक समूह को परिभाषित करता है।

"scripts": {
  "start": "npm-run-all -p watch-css start-js",
  "build": "npm run build-css && react-scripts build",
  "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
  "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
  "start-js": "react-scripts start"
},

स्पष्टता के लिए, मैंने एक आरेख जोड़ा।

ब्लू बॉक्स स्क्रिप्ट के संदर्भ हैं, जिनमें से सभी आप एक npm run <script-name>कमांड के साथ सीधे निष्पादित कर सकते हैं । लेकिन जैसा कि आप देख सकते हैं, वास्तव में केवल 2 व्यावहारिक प्रवाह हैं:

npm run start
npm run build

ग्रे बॉक्स कमांड हैं जिन्हें कमांड लाइन से निष्पादित किया जा सकता है।

इसलिए, उदाहरण के लिए, यदि आप वास्तव में कमांड को ट्रांसलेट npm start(या npm run start) चलाते हैं npm-run-all -p watch-css start-js, जिसे कमांडलाइन से निष्पादित किया जाता है।

मेरे मामले में, मेरे पास यह विशेष npm-run-allकमांड है, जो एक लोकप्रिय प्लगइन है जो उन स्क्रिप्ट की खोज करता है जो "बिल्ड:" से शुरू होती हैं, और उन सभी को निष्पादित करती हैं। मेरे पास वास्तव में उस पैटर्न से कोई मेल नहीं है। लेकिन इसका उपयोग समानांतर में कई कमांड चलाने के लिए भी किया जा सकता है, जो कि यह -p <command1> <command2>स्विच का उपयोग करके यहां करता है । तो, यहाँ यह 2 स्क्रिप्ट निष्पादित करता है, यानी watch-cssऔर start-js। (उन अंतिम उल्लिखित स्क्रिप्ट पर नजर रखने वाले हैं जो फ़ाइल परिवर्तनों की निगरानी करते हैं, और केवल मारे जाने पर समाप्त हो जाएंगे।)

यह watch-cssसुनिश्चित करता है कि *.scssफाइलें फाइलों में अनुवादित हैं *.css, और भविष्य के अपडेट की तलाश में हैं।
start-jsको अंक react-scripts startजो एक विकास मोड में वेबसाइट होस्ट करता है।

अंत में, npm startकमांड कॉन्फ़िगर करने योग्य है। यदि आप जानना चाहते हैं कि यह क्या करता है, तो आपको package.jsonफ़ाइल की जांच करनी होगी । (और आप कुछ जटिल होने पर थोड़ा आरेख बनाना चाह सकते हैं)।

— bvdb
स्रोत

3

"start" एक स्क्रिप्ट का नाम है, npm में आप इस तरह से स्क्रिप्ट चलाते हैं npm run scriptName, npm start यह भी एक छोटा समय है npm run start

"रिएक्शन-स्क्रिप्ट्स" के लिए यह विशेष रूप से क्रिएट-रिएक्शन-ऐप से संबंधित स्क्रिप्ट है

— सगिव bg
स्रोत