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

120

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

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

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

reactjs 
— gdso
स्रोत
process.env
— वेबपैक

जवाबों:

128

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

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

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

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

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

webpack

का प्रयोग करें DefinePluginअपने webpack config में तो जैसे:

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

Browserify

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

परिणाम

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

बक्शीश

रूपांतरित कोड को छोटा करते हुए आप "डेड कोड एलिमिनेशन" का लाभ उठा सकते हैं। : जब minifier स्मार्ट पर्याप्त एहसास है कि है DCE है "production" !== "production"है हमेशा झूठे और तो बस बचत आप बाइट्स अगर ब्लॉक में किसी भी कोड निकाल देंगे।

— आश्रम-जैसे आतंक
स्रोत
1
प्रतिक्रिया पर प्रलेखन के रूप में अच्छी तरह से बताते हैं facebook.github.io/react/docs/…
— asotog
1
क्या आपको वास्तव में JSON.stringify ('उत्पादन') की आवश्यकता है? या सिर्फ 'प्रोडक्शन' ही काफी है?
— व्लाद निकुला
4
@ व्लादिनीकुला को इसका होना आवश्यक है '"production"'। डबल उद्धृत किया गया है, जो आपके लिए है
— मठवासी-आतंक
1
आप इसका उपयोग भी कर सकते हैं JSON.stringify(process.env.NODE_ENV)ताकि NODE_ENV=production webpack ...कमांड-लाइन पर इसके माध्यम से टॉगल किया जा सके । स्पष्ट कोड का जोड़ा बोनस =)
— हेनरी बेलीथ
2
बस पता चला है कि इस DefinePluginप्रयोग के साथ बदला जा सकता हैnew webpack.EnvironmentPlugin(['NODE_ENV'])
— हेनरी ब्लिथ
50

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

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

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

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

— एडवर्ड एम स्मिथ
स्रोत
2
यदि आपका बंडलर छोटा होता है, तो मुझे नहीं लगता कि यह डिबगिंग को हटा देगा। आपको अपने निर्माण में प्रतिक्रिया के लघु संस्करण को शामिल करने की आवश्यकता है - प्रतिक्रिया वितरण में शामिल एक - यह वास्तव में अलग-अलग संस्करण से अलग कोड है, जिसे मैं समझता हूं।
— एडवर्ड एम स्मिथ
17
यदि आप npmसीधे प्रतिक्रिया पैकेज से निर्माण कर रहे हैं, तो NODE_ENV = 'production'समान जांच करने के लिए सेट करने के लिए envify जैसी soemthing का उपयोग करें । @EdwardMSmith मुझे बताएं कि आप उस जानकारी को कहां देखना चाहते हैं और मैं इसे जोड़ सकता हूं (या आप बस एक पीआर सबमिट कर सकते हैं)!
— सोफी अल्परट
2
@ बेनएल्पर - मैं प्रोडक्शंस की तैनाती के लिए गाइड या टिप्स के तहत एक पेज कहूंगा। मैं देख लेता हूँ और देखता हूँ कि मैं क्या कर सकता हूँ। मैंने वास्तव में उत्पादन परिनियोजन नहीं किया है, इसलिए इसे कुछ संशोधनों की आवश्यकता हो सकती है। मैं एक पीआर प्रस्तुत करूँगा।
— एडवर्ड एम स्मिथ
1
मैं सिर्फ इस पर जोड़ना चाहता था कि ऐडऑन संस्करण में विकास मोड चालू नहीं है, यहां तक ​​कि अनमनीकृत संस्करण भी।
— कल्लड्रेक्स
8
मुझे नहीं लगता कि यह सबसे अच्छा उत्तर है क्योंकि कुछ लोग ब्राउज़र के साथ अपनी प्रतिक्रिया का निर्माण करते हैं और एक उत्तर बनाने का उपयोग NODE_ENVशीर्ष पर मौजूद होना चाहिए।
— ब्योर्न
16

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

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

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

क्या आपको उत्पादन करना /lib/React.jsया /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.

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

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

हालाँकि, यदि आप /distसंस्करणों को छोटा करते हैं, तो वेबपैक का UglifyJsPlugin शिकायत करेगा।

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` के रूप में अच्छा काम करता है। मैंने कोई सबूत नहीं पढ़ा है कि आपको समान परिणाम प्राप्त हो।
  • मुझे प्रतिक्रिया / रिड्यूस इकोसिस्टम से 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'))
    }
  }
— JohnSz
स्रोत
1
अगर वेबपैक क्लाई से चल रहा है: const IS_PRODUCTION = process.argv.indexOf ('p')! == -1;
— ग्रेग
2
यह अनुशंसित समाधान नहीं है (स्रोत: मैं रिएक्ट पर काम करता हूं)। सही समाधान यहाँ प्रलेखित हैं: reactjs.org/docs/… । यदि वे आपके लिए काम नहीं करते हैं, तो रिएक्ट रेपो में एक समस्या दर्ज करें और हम आपकी मदद करने की कोशिश करेंगे।
— दान अब्रामोव
4

वेबपैक आधारित निर्माण के लिए, मैं 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')
    }

आप काम करने वाले को यहां से ढूंढ सकते हैं

— सेंथिल
स्रोत
1
यह अनुशंसित समाधान नहीं है (स्रोत: मैं रिएक्ट पर काम करता हूं)। सही समाधान यहाँ प्रलेखित हैं: reactjs.org/docs/… । यदि वे आपके लिए काम नहीं करते हैं, तो रिएक्ट रेपो में एक समस्या दर्ज करें और हम आपकी मदद करने की कोशिश करेंगे।
— डैन अब्रामोव
1

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

मुझे यकीन नहीं है कि ऐसा क्यों है, क्योंकि नमूने के webpack.config.js में एक टिप्पणी है कि लगता है कि externals: { react: 'React' }यह काम करेगा, लेकिन फिर आगे बढ़ता है और सीधे पृष्ठ में प्रतिक्रिया शामिल करता है।

— रोमन स्टार्कोव
स्रोत
अगर मैंने इसका सही अनुमान लगाया है, तो आप कह रहे हैं कि यदि आप ReactJS.Net का उपयोग करके बंडलिंग करते हैं और इसे छोटा करते हैं, तो यह प्रतिक्रियाशील.जेएस विकास फ़ाइल को छोटा करने का लाभ नहीं देगा। इसके लिए #IF DEBUG चेक का उपयोग करते हुए, किसी को फेसबुक डाउनलोड पेज से प्रदान किए गए react.js की स्पष्ट रूप से URL को उत्पादन फ़ाइल में बदलना होगा। प्रतिक्रिया-डोम और रेडक्स के साथ भी ऐसा ही है। क्या मैं सही हू?
— फैसल मक
@FaisalMushtaq इसका हिस्सा है; इस बात पर निर्भर करता है कि आप प्रतिक्रिया कैसे शामिल करते हैं। क्या आपको स्पष्ट रूप से कीमा बनाया हुआ संस्करण पर स्विच करना पड़ सकता है। लेकिन मैं वास्तव में कहना चाहता था कि रिएक्ट को इस तरह से स्थापित करना संभव है कि विकास मोड को चालू करने का "आधिकारिक" तरीका काम नहीं करेगा।
— रोमन स्टार्कोव
0

के लिए केवल Webpack v4 उपयोगकर्ताओं:

निर्दिष्ट mode: productionऔर mode: developmentआपके process.env.NODE_ENVवेबपैक कॉन्फिगर में डिफ़ॉल्ट रूप से डेफिनप्लगिन का उपयोग करके परिभाषित करेगा । कोई अतिरिक्त कोड आवश्यक नहीं है!

webpack.prod.js (डॉक्स से लिया गया)

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
});

और हमारे जेएस में:

console.log(process.env.NODE_ENV) // --> 'development' or 'production'

वेबपैक डॉक्स: https://webpack.js.org/guides/production/#specify-the-mode

— जो
स्रोत
0

मैं एक मैनुअल बिल्ड प्रक्रिया का उपयोग करता हूं जो वेबपैक के माध्यम से चलती है, इसलिए यह मेरे लिए दो चरणों वाली प्रक्रिया थी:

  1. पैकेज से पर्यावरण चर सेट करें। क्रॉस-एनवी पैकेज का उपयोग करके आगजनी करें:

    "scripts": { "build-dev": "cross-env NODE_ENV=development webpack --config webpack.config.js", "build-prod": "cross-env NODE_ENV=production webpack --config webpack.config.js" }

  2. पर्यावरण चर का उपयोग करने के लिए webpack.config.js फ़ाइल को बदलें (जो कि अगर हम विकास या उत्पादन मोड में हैं, यह निर्धारित करने के लिए प्रतिक्रिया पर पारित किया गया है), और उत्पादित बंडल को कम से कम करने को अक्षम करें यदि हम विकास मोड में हैं तो हम देख सकते हैं हमारे घटकों के वास्तविक नाम। हमें इसके लिए webpack.config.js फ़ाइल में वेबपैक की अनुकूलन संपत्ति का उपयोग करने की आवश्यकता है :

    optimization: { nodeEnv: process.env.NODE_ENV, minimize: process.env.NODE_ENV === 'production' }

वेबपैक v4.41.5, रिएक्ट v16.9.19, क्रॉस-एनवी v7.0.0, नोड v10.16.14

— जॉन गाल्ट
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.