MSBuild i Webpack

Question

Pracuję nad aplikacją Angular2 w VS2015 i mam skonfigurowane środowisko pakowania i minimalizacji pakietów webpack.

To jest moje 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'); 
 
}

mam również zainstalowany biegacza zadanie WebPack który wywołuje to z następujących poleceń

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

i

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

Konfiguracja wydaje się działać dobrze. Jednak chcę to zintegrować z moimi wersjami CI TFS. Komenda webpack powinna uruchomić się po zakończeniu projektu i zgłosić awarię kompilacji, gdy kompilacja pakietu nie powiedzie się. Próbowałem włączyć następujący kod w moim .csproj pliku

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

nie powiodło się z powodu błędu 9009

Potem próbowałem, począwszy komendę się z folderu node_modules gdzie został zainstalowany WebPack

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

wciąż na próżno. Nawet jeśli sprawię, że to zadziała, nie jestem pewien, czy spowodowałoby to niepowodzenie kompilacji VS, jeśli napotka błąd w pakiecie sieci Web.

Jak mogę tego dokonać?

Answer 1

Umieść różne skrypty w pakiecie.json dla trybu programowania i produkcji. Następnie w przypadku wydarzenia "AfterBuild" studia wizualnego wywołaj te skrypty w różnych konfiguracjach.

Dodaj następujący dwa skrypty, 'buildDev' i 'buildProd' w package.json:

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

W AfterBuild wydarzeniach visual studio dodać tych dwóch poleceń warunkowych:

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

Na koniec plik webpack.conf.js wygląda następująco:

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; 
} 

Ważna uwaga: Koniecznie użytku wykończenia() funkcji z process.env.NODE_ENV jak będzie cmd traktować spację w poleceniu „SET NODE_ENV = rozwój & & WebPack -d --color jako znak i dołącz do zmiennej NODE_ENV. Tak więc, gdy określamy to jako "rozwój", to faktycznie jest ustawiane jako (programowanie + spacja).

Answer 2

W przypadku budowy TFS CI można skorzystać z tych kroków, aby spełnić wymagania.

1. Dodaj krok NPM
2. Dodaj poleceń krok Linia

Uwaga: Istnieje -bail argumentem, który jest wymagany w przeciwnym razie krok/zadanie będzie sukces mimo polecenia WebPACK rzuca wyjątek.

Można również dodać zmienną w definicji kompilacji (zakładka zmiennej)