2017-03-16 9 views
5

से वेबपैक देव सर्वर कस्टम पैरामीटर मैं कमांड लाइन से कस्टम पैरामीटर पास करना चाहता हूं। कुछ इस तरह:कमांड लाइन

webpack-dev-server --inline --hot --customparam1=value 

वास्तव में है कि मैं एक Vue-लोडर आवेदन पर काम कर रहा हूँ कि मैं क्या हासिल करने की कोशिश कर रहा हूँ। एप्लिकेशन में कुछ सेवाएं हैं जो डेटा लाती हैं।

मैं किसी अन्य अनुप्रयोग है कि API सर्वर के रूप में कार्य किया है। API सर्वर है

1): हम 2 तरीकों से चलाने के लिए (क्योंकि हमारी टीम के सभी सदस्यों एपीआई सर्वर तक पहुँच नहीं है)

ताकि सेवा 2 तरीके डेटा प्राप्त करने के लिए किया आवेदन की जरूरत है (देव टीम के लिए) चल रहा है, http तो API सर्वर (डिजाइन टीम के लिए नहीं चल रहा है) स्थानीय होस्ट

2) से डेटा प्राप्त करने के लिए, बस सेवाओं में पहले से ही वहाँ स्थिर डेटा का उपयोग कॉल का उपयोग करें:

var someData; 
if (customparam1 === "withApi"){ 
    someData=getData("http://localhost:8081/apiendpoint"); 
} else { 
    someData=[ 
     {a:b}, 
     {c:d}, 
     // more custom array of static data 
     ..... 
    ] 
} 

तो यह customparam1 वेबपैक-dev-server कमांड लाइन से पारित किया जाना चाहिए और प्रति this प्रलेखन के रूप में, इस तरह के कोई रास्ता नहीं मौजूद है मैं मिल सकता है कि (मैं कुछ याद किया?)

मैं इसे कैसे करते हैं?

पुनश्च: मैं webpack 1.12.1

उत्तर

4

आप --define विकल्प है, जो तर्क के रूप में लेता है var=value उपयोग कर सकते हैं पर कर रहा हूँ। वेबपैक बस सभी घटनाओं को मूल्य के साथ बदल देगा। निम्न कोड के साथ उदाहरण के लिए:

if (ENABLE_API) { 
    // Use api 
} else { 
    // Use static data 
} 

जब आप चलाएँ:

webpack-dev-server --inline --hot --define ENABLE_API 

यह परिणाम में होगा:

if (true) { 
    // Use api 
} else { 
    // Use static data 
} 

तुम भी --define ENABLE_API=false साथ इसे चलाने के लिए की आवश्यकता होगी, अन्यथा यह होगा एक त्रुटि फेंक दें कि ENABLE_API परिभाषित नहीं है। चूंकि यह एक साधारण टेक्स्ट प्रतिस्थापन है, इसलिए आपके द्वारा पास किया जाने वाला मान डाला जाएगा, इसलिए यदि आप एक स्ट्रिंग चाहते हैं तो आपको '"value"' (कोट्स के अंदर नोट उद्धरण) का उपयोग करना होगा अन्यथा इसे नियमित जावास्क्रिप्ट के रूप में व्याख्या किया जाता है, लेकिन मुझे नहीं मिल सका कमांड लाइन से काम करने के लिए एक स्ट्रिंग।

आप webpack.DefinePlugin का उपयोग करके सटीक वही प्राप्त कर सकते हैं (मैंने वेबपैक 2 दस्तावेज़ों को लिंक किया है, लेकिन यह वेबपैक 1 में भी काम करता है)। इसके साथ आप अधिक जटिल प्रतिस्थापन कर सकते हैं और एक स्ट्रिंग संस्करण बनाने के लिए JSON.stringify जैसी उपयोगिताओं का उपयोग करने में भी सक्षम हैं। उदाहरण के कमांड लाइन से एक तार गुजर के साथ समस्या को दूर करने के लिए, आप उपयोग कर सकते हैं:

new webpack.DefinePlugin({ 
    API_TYPE: JSON.stringify(process.env.API_TYPE) 
}) 

और वातावरण चर API_TYPE सेट withApi के साथ चलाएँ:

API_TYPE=withApi webpack-dev-server --inline --hot 

और हर API_TYPE बदल दिया जाएगा स्ट्रिंग 'withApi' के साथ, यदि आप इसे बिल्कुल निर्दिष्ट नहीं करते हैं, तो यह केवल अपरिभाषित होगा।

+0

यह वास्तव में काम करता है! जवाब के लिए धन्यवाद। मुझे इसके साथ एकमात्र मुद्दा यह है कि यदि मैं वेबपैक सर्वर को पुनरारंभ करता हूं तो मुझे ब्राउज़र बंद करना होगा और स्थानीय ऐप के यूआरएल के साथ फिर से शुरू करना होगा, अन्यथा यह 404 त्रुटि देता है। क्या आपको भी एक ही समस्या का सामना करना पड़ता है? – rahulserver

+0

मैंने इसे फ़ायरफ़ॉक्स पर सत्यापित किया। लेकिन क्रोम पर भी ब्राउज़र को पुनरारंभ करना काम नहीं करता है और मैं 404 प्राप्त करता रहता हूं – rahulserver

4

मैं इतना यकीन नहीं है, लेकिन आम तौर पर मैं अलग वातावरण के लिए ऐसा करते हैं:

आदेश:

NODE_ENV=development webpack-dev-server 

webpack.config.js (प्लगइन):

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

मुख्य जेएस फ़ाइल:

if(process.env.NODE_ENV !== 'production') { ... } 

मुझे नहीं लगता कि webpack-देव-सर्वर, कस्टम पैरामीटर पार्स करने में सक्षम है, लेकिन आप कुछ इस तरह की कोशिश कर सकते हैं:

आदेश:

webpack-dev-server --customparam1=value 

webpack.config.js:

var path = require("path"); 
var webpack = require("webpack"); 

function findPara(param){ 
    let result = ''; 
    process.argv.forEach((argv)=>{ 
     if(argv.indexOf('--' + param) === -1) return; 
     result = argv.split('=')[1]; 
    }); 
    return result; 
} 

const customparam1 = findPara('customparam1'); 

module.exports = { 
    ... 
    plugins: [ 
     new webpack.DefinePlugin({ 
      customparam1:JSON.stringify(customparam1) 
     }) 
    ] 
}; 

मुख्य js फ़ाइल:

if(customparam1 === xxx){ ... }