एमएसबिल्ड और वेबपैक

Question

मैं वीएस2015 में एक कोणीय 2 अनुप्रयोग विकसित कर रहा हूं और इसके लिए वेबपैक बंडलिंग और मिनीफिकेशन वातावरण स्थापित किया गया है।

यह मेरा webpack.conf.js

switch (process.env.NODE_ENV) { 
 
    case 'prod': 
 
    case 'production': 
 
     module.exports = require('./config/webpack.prod'); 
 
     break; 
 
    case 'test': 
 
    case 'testing': 
 
     //module.exports = require('./config/webpack.test'); 
 
     break; 
 
    case 'dev': 
 
    case 'development': 
 
    default: 
 
     module.exports = require('./config/webpack.dev'); 
 
}

मैं भी एक webpack कार्य धावक जो निम्न कमांड

cmd /c SET NODE_ENV=development&& webpack -d --color 

और के साथ इस आह्वान स्थापित किया है है

cmd /c SET NODE_ENV=production&& webpack -p --color 

सेटअप ठीक काम करता प्रतीत होता है। हालांकि, मैं इसे अपने टीएफएस सीआई के निर्माण के साथ एकीकृत करना चाहता हूं। प्रोजेक्ट बनने के बाद वेबपैक कमांड को आग लगनी चाहिए और बिल्ड विफलता की रिपोर्ट करना वेबपैक बिल्ड विफल रहता है। मैं अपने .csproj फ़ाइल

<Target Name="AfterBuild"> 
<Exec Condition="$(Configuration) == 'Debug'" Command="cmd /c SET NODE_ENV=production&& webpack -p --color"> 
</Exec> 
</Target> 

यह एक त्रुटि के साथ विफल 9009

कि मैंने कोशिश की है, जहां webpack स्थापित किया गया था node_modules फ़ोल्डर से कमान अपने हाथ में शुरू करने के बाद में निम्न कोड को शामिल करने की कोशिश की है

<Target Name="AfterBuild"> 
<Exec Condition="$(Configuration) == 'Debug'" Command="./node_modules/.bin cmd /c SET NODE_ENV=production&& webpack -p --color"> 
</Exec> 
</Target> 

अभी भी व्यर्थ में है। यहां तक ​​कि अगर मुझे यह काम करने के लिए मिलता है, तो मुझे यकीन नहीं है कि अगर वीएस बिल्ड विफल हो जाए तो यह वेबपैक में त्रुटि का सामना कर रहा है।

मैं इसके साथ कैसे आगे बढ़ूं?

Answer 1

विकास और उत्पादन मोड के लिए package.json में विभिन्न स्क्रिप्ट रखें। फिर दृश्य स्टूडियो की 'आफ्टरबिल्ड' घटना पर, उन स्क्रिप्ट को विभिन्न कॉन्फ़िगरेशन पर कॉल करें।

दो लिपियों, 'buildDev' और 'buildProd' package.json में निम्नलिखित जोड़ें:

"scripts": { 
    "buildDev": "SET NODE_ENV=development && webpack -d --color", 
    "buildProd": "SET NODE_ENV=production && webpack -p --color", 
    } 

दृश्य स्टूडियो के AfterBuild घटनाओं में जोड़ने के लिए इन दो सशर्त आदेश:

<Target Name="AfterBuild"> 
    <Exec Condition="$(Configuration) == 'Debug'" Command="npm run buildDev" /> 
    <Exec Condition="$(Configuration) == 'Release'" Command="npm run buildProd" /> 
    </Target> 

और अंत में webpack.conf.js इस तरह:

switch (process.env.NODE_ENV.trim()) { 
    case 'prod': 
    case 'production': 
     module.exports = require('./config/webpack.prod'); 
     break; 
    case 'dev': 
    case 'development': 
    default: 
     module.exports = require('./config/webpack.dev'); 
     break; 
} 

महत्वपूर्ण नोट: process.env.NODE_ENV साथ उपयोग ट्रिम() फ़ंक्शन करना सुनिश्चित करें के रूप में cmd ​​आदेश में रिक्त स्थान व्यवहार करेगा "सेट NODE_ENV = विकास & & webpack -d --color चरित्र के रूप में और इसे NODE_ENV चर में जोड़ें। इसलिए जब हम इसे 'विकास' के रूप में स्थापित कर रहे हैं, तो यह वास्तव में (विकास + व्हाइटस्पेस) के रूप में सेट हो जाता है।

Answer 2

टीएफएस सीआई निर्माण के लिए, आप अपनी आवश्यकता को प्राप्त करने के लिए इन चरणों का उल्लेख कर सकते हैं।

1. NPM कदम जोड़े
2. कमांड लाइन कदम जोड़े

नोट: वहाँ -bail तर्क, जो अन्यथा आवश्यक है कदम/कार्य भले ही webpack आदेश फेंकता सफल होने हो जाएगा अपवाद।

इसके अलावा, आप बिल्ड परिभाषा (चर टैब) में चर जोड़ सकते हैं