दिलचस्प पोस्ट
IDisposable इंटरफ़ेस का उचित उपयोग ArrayAdapter के साथ ListView के लिए कस्टम फ़िल्टर कैसे लिखें .d.ts के बिना टाइपस्क्रिप्ट से एक बाहरी गैर-टाइपस्क्रिप्ट लायब्रेरी का उपयोग कैसे करें? Tkinter पर पूर्णस्क्रीन मोड प्रदर्शित करें WinForms में radiobuttons के एक समूह को दूर करने का सर्वोत्तम तरीका एप्पल ग्योरोस्कोप नमूना कोड iOS8.1 सिम्युलेटर हमेशा जर्मन कीबोर्ड कीबोर्ड के बावजूद यूएस कीबोर्ड लेआउट का उपयोग करता है जावा में विभाजन हमेशा शून्य (0) में होता है? जावा जेनेरिक में सूची <<> क्या मतलब है? Thread.start () और Thread.run () के बीच अंतर क्या है? एकाधिक चार सीमांकक पर आधारित एक स्ट्रिंग को विभाजित करना कैसे आर स्ट्रिंग में बैकस्लैश से बचें एमएसवी 9 9 के लिए सीमके निर्मित परियोजना फाइल के साथ पुस्तकालय को बढ़ावा देने में असफल रहा विशिष्ट मूल्यों को वापस करने के लिए ऑरेकल में सूची बनाएं केवल फ़ोल्डर नाम से एक बैरल आयात कैसे करें?

ReactJS 'विकास मोड' को चालू / बंद कैसे करें?

ReactJS के प्रॉप सत्यापन सुविधा का उपयोग करना शुरू किया, जो कि डॉक्स के अनुसार केवल प्रदर्शन के कारणों के लिए 'डेवलपमेंट मोड' में काम करता है

एक विशेष घटक के गुणों को मान्य करने के लिए लगता है, जिस पर मैंने टिप्पणी की है, लेकिन मुझे स्पष्ट रूप से 'विकास मोड' को बदलना याद नहीं है

मैंने कैसे विकास मोड ट्रिगर / टॉगल करने के लिए खोज करने की कोशिश की, लेकिन कोई भाग्य नहीं था।

Solutions Collecting From Web of "ReactJS 'विकास मोड' को चालू / बंद कैसे करें?"

अन्य जवाब यह मानते हैं कि आप प्रतिक्रिया से बाहरी पूर्व-निर्मित फ़ाइलों का उपयोग कर रहे हैं, और सही है कि यह नहीं है कि कितने लोग जा रहे हैं या पैकेज के रूप में प्रतिक्रिया दें। इसके अलावा, इस बिंदु पर सबसे ज्यादा हर पुस्तकालय और पैकेज भी इसी सम्मेलन पर निर्भर करता है जिससे उत्पादन के दौरान देव समय से मददगार बंद हो जाता है। बस minified प्रतिक्रिया का उपयोग कर के रूप में अच्छी तरह से टेबल पर उन सभी संभावित अनुकूलन छोड़ देंगे

अंततः जादू कोडबेस के दौरान process.env.NODE_ENV को संदर्भ एम्बेड करने के लिए नीचे आता है; एक सुविधा टॉगल की तरह ये कार्य

 if (process.env.NODE_ENV !== "production") // do propType checks 

उपरोक्त सबसे आम पैटर्न है, और अन्य पुस्तकालयों को भी इसका अनुसरण करते हैं। तो इन चेक को "निष्क्रिय" करने के लिए हमें "production" लिए NODE_ENV को टॉगल करने की आवश्यकता है

"देव मोड" को अक्षम करने का उचित तरीका पसंद के आपके बंडलर के माध्यम से है

webpack

अपने DefinePlugin कॉन्फ़िग में DefinePlugin उपयोग करें, जैसे:

 new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify("production") } }) 

Browserify

Envify ट्रांसफ़ॉर्मेशन का उपयोग करें और NODE_ENV=production ( "set NODE_ENV=production" पर Windows पर) के साथ अपने NODE_ENV=production बिल्ड चरण को चलाने के लिए

परिणाम

यह आउटपुट बंडलों का उत्पादन करेगा जो कि process.env.NODE_ENV सभी उदाहरण स्ट्रिंग के साथ प्रतिस्थापित किए गए हैं: "production"

बोनस

जब आप रूपांतरण कोड को कम करते हैं तो आप "मृत कोड उन्मूलन" का लाभ उठा सकते हैं। डीसीई जब मिनेफ़ायर समझने के लिए काफी चालाक होता है कि: "production" !== "production" हमेशा झूठा होता है और ऐसा ही यदि ब्लॉक को बाइट्स को सहेजने में कोई भी कोड निकाल देगा।

हाँ, यह वास्तव में अच्छी तरह से प्रलेखित नहीं है, लेकिन ReactJS डाउनलोड पृष्ठ पर यह विकास और उत्पादन मोड के बारे में बात करता है:

हम प्रतिक्रिया के दो संस्करण प्रदान करते हैं: विकास के लिए एक असम्पीडित संस्करण और उत्पादन के लिए एक न्यूनतम संस्करण। विकास संस्करण में आम गलतियों के बारे में अतिरिक्त चेतावनियां शामिल हैं, जबकि उत्पादन संस्करण में अतिरिक्त प्रदर्शन अनुकूलन शामिल हैं और सभी त्रुटि संदेश स्ट्रिप्स हैं।

असल में, प्रतिक्रिया का अप्रतिम संस्करण "विकास" मोड है, और प्रतिक्रिया का न्यूनतम संस्करण "उत्पादन" मोड है।

"उत्पादन" मोड में होने के लिए, बस minified संस्करण react-0.9.0.min.js

मैंने इसे कहीं और पोस्ट किया, लेकिन स्पष्ट रूप से, यहां एक बेहतर जगह होगी।

मान लें कि आप एनपीएम के साथ 15.0.1 रिएक्ट करें, import react from 'react' या react = require('react') चलाएगा ./mode_modules/react/lib/React.js जो प्रतिक्रिया का कच्चा स्रोत है।

प्रतिक्रिया दें दस्तावेज़ों का सुझाव है कि आप ./mode_modules/react/dist/react.js के विकास के लिए उपयोग करें और प्रतिक्रिया के लिए प्रतिक्रिया ./mode_modules/react/dist/react.js

क्या आपको उत्पादन के लिए /lib/React.js या /dist/react.js को minify करना चाहिए, प्रतिक्रिया एक चेतावनी संदेश प्रदर्शित करेगा जो आपने /dist/react.js -उत्पादन कोड बना दिया है:

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See fb.me/react-minification for more details.

प्रतिक्रिया- dom, redux, प्रतिक्रिया- redux इसी तरह व्यवहार करते हैं। रेडयुक्स एक चेतावनी संदेश दिखाता है। मेरा मानना ​​है कि प्रतिक्रिया-डोम भी करता है

तो आपको स्पष्ट रूप से उत्पादन संस्करण को उपयोग /dist करने के लिए प्रोत्साहित किया जाता है

हालांकि अगर आप /dist संस्करणों को कम करते हैं, तो वेबपैक का यूग्लिफ़ेज प्लगिन शिकायत करेगा।

WARNING in ../~/react/dist/react.js Critical dependencies: 4:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ../~/react/dist/react.js 4:478-4851

आप इस संदेश से बच नहीं सकते क्योंकि UglifyJsPlugin केवल वेबपैक विन्डोज़ को अलग नहीं कर सकता है, व्यक्तिगत फाइलों को नहीं छोड़ सकता।

मैं दोनों विकास और उत्पादन /dist संस्करणों को स्वयं का उपयोग करता हूं।

  • वेबपैक को काम करने के लिए कम काम है और इसे थोड़ी देर में खत्म कर दिया जाता है (YRMV)
  • डॉक्स कहते हैं कि /dist/react.min.js उत्पादन के लिए अनुकूलित है। मैंने कोई सबूत नहीं पढ़ा है कि 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') } प्लस कूटप्रदता को '/ dist / react.min.js` के रूप में अच्छा काम करता है I मैंने कोई सबूत नहीं पढ़ा है, आपको एक ही परिणामी कोड मिलता है।
  • प्रतिक्रिया / रेडक्लस पारिस्थितिकी तंत्र से 3 की बजाय मुझे 1 चेतावनी संदेश मिलता है

आप वेबपैक के साथ /dist संस्करणों का उपयोग कर सकते हैं:

 resolve: { alias: { 'react$': path.join(__dirname, 'node_modules', 'react','dist', (IS_PRODUCTION ? 'react.min.js' : 'react.js')), 'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist', (IS_PRODUCTION ? 'react-dom.min.js' : 'react-dom.js')), 'redux$': path.join(__dirname, 'node_modules', 'redux','dist', (IS_PRODUCTION ? 'redux.min.js' : 'redux.js')), 'react-redux$': path.join(__dirname, 'node_modules', 'react-redux','dist', (IS_PRODUCTION ? 'react-redux.min.js' : 'react-redux.js')) } } 

वेबपैक आधारित निर्माण के लिए, मैं DEV और PROD के लिए अलग webpack.config.js सेटअप करता था। प्रॉड के लिए, नीचे के रूप में उपनाम को हल करें

  alias: { 'react$': path.join(__dirname, 'node_modules', 'react','dist','react.min.js'), 'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist','react-dom.min.js') } 

आप यहां से कार्य कर सकते हैं

यदि आप कुछ ReactJS.NET / Webpack ट्यूटोरियल की तरह काम कर रहे हैं, तो आप प्रक्रिया मोड को चालू / बंद के रूप में मैं बता सकता हूँ पर स्विच करने के लिए process.env का उपयोग नहीं कर सकता। यह नमूना प्रतिक्रिया। जेएस को सीधे सीधा करता है ( इंडेक्स.cshtml देखें), ताकि आपको यूआरएल बदलकर .min.js या गैर-मिनिफाइड संस्करण चुनना पड़े।

मुझे यकीन नहीं है कि ऐसा क्यों है, क्योंकि नमूना के वेबपैक.कॉन्फ़ि.ज.एस. में एक टिप्पणी है जो externals: { react: 'React' } संकेत देती है externals: { react: 'React' } नौकरी करेगी, लेकिन फिर आगे बढ़ेगी और इसमें सीधे प्रतिक्रिया शामिल होगी पन्ना।