देव और उत्पादन पर वेबपैक के साथ पर्यावरण चर

Question

मैं वेबपैक और उसके रिश्तेदारों जैसे ऐसे निर्माण उपकरण का उपयोग करने की दुनिया में काफी नया हूं, इसलिए शायद यह प्रश्न थोड़ा नाराज है लेकिन कृपया मुझे समझें।

पृष्ठभूमि: मैं क्लाइंट साइड वेब ऐप (रिस्पॉज + रेडक्स का उपयोग करके) विकसित कर रहा हूं और वेबपैक का उपयोग अपने निर्माण उपकरण और देव-सर्वर लोडर के रूप में कर रहा हूं। अभी मुझे केवल देव पर्यावरण (लॉगिंग और सामान) में कोड की कुछ पंक्तियां बनाना है। तो मैं नेट पर देखा process.env.NODE_ENV चर सेट करने के लिए webpack.DefinePlugin प्लगइन का उपयोग और कोड इस तरह है:

plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') 
     }) 
] 

फिर NODE_ENV varibale मेरी मशीन पर सेट नहीं है (जो इस समय नहीं है) यह स्वचालित रूप से विकास के लिए सेट। क्या मैं सही हू?

क्या उत्पादन मशीन के बारे में? मैं /etc/environment फ़ाइल में 'उत्पादन' को यह env चर सेट की जरूरत है?

फिर एक और सवाल यह है कि webpack जानता है क्या NODE_ENV है जब मैं एप्लिकेशन की सेवा है? यह संकलित जब मैं उत्पादन मशीन पर निर्माण करते हैं और बनाया bundle.js में सेट किया गया है? ($ webpack --progress -p)

एक और सवाल यह है कि मैं उत्पादन या विकास पर्यावरण में सुविधाओं को कैसे सक्षम/अक्षम कर सकता हूं? बस करना एक अगर इस तरह की हालत बयान:

if(process.env.NODE_ENV == 'development'){ 
    console.log('this is visible in development'); 
} 

और पिछले एक, अगर यह क्या वास्तव में, करता है webpack इसे बनाया bundle.js करने के लिए कोड के इस टुकड़े transpiling रहा है? यदि हां, तो यह उपयोगकर्ता को सही करने के लिए दृश्यमान है? क्या इसके साथ कुछ करने के लिए है?

आशा है कि यह ज्यादा नहीं है, धन्यवाद एक गुच्छा!

Answer 1

उत्पादन मशीन आप कमांड

NODE_ENV=production webpack 

दूसरी ओर /etc/environment को यह चर गुजर पर साथ अपनी स्क्रिप्ट का निर्माण कर सकते पर भी समाधान है।

---

process.env.NODE_ENV उदाहरण के लिए bundle.js

में स्थिर स्ट्रिंग में बदल जाती है अगर आप इस टुकड़ा पर NODE_ENV=production webpack चलाने

if(process.env.NODE_ENV == 'development'){ 
    console.log('this is visible in development'); 
} 

bundle.js में

आप पाएंगे (संपादित)

if ('production' == 'development') { 
    console.log('this is visible in development'); 
} 

if (false) { // 'production' == 'development' 
    console.log('this is visible in development'); 
} 

---

तो सवाल करने के लिए सक्षम/अक्षम सुविधाओं अपने कोड मान्य है के बारे में अनुसार।

---

आप शर्त के शरीर को निकालना चाहते हैं, तो यह गलत है (जैसे ऊपर के उदाहरण में आप production वातावरण में console.log('this is visible in development'); को दिखाने के लिए नहीं करना चाहते हैं), तो आप का उपयोग करना चाहिए

new webpack.optimize.UglifyJsPlugin() 

यह निकाल देंगे false स्थिति के साथ आपके सभी बयान।