asp.net mvc - Uteslut katalog från MSBuild Typescript-kompilering

Jag har ett ASP.NET MVC/Angular2-projekt som använder MSBuild för att kompilera mina Typescript-filer. Projektet innehåller hela Angular2-källkoden och dess NodeJS-beroenden utöver min Angular2-kod (app.ts, etc.).

Mitt problem är att MSBuild kompilerar varje Typescript-fil i hela lösningen - inklusive Angular2-källkoden, dess beroenden och min app.ts-kod. Jag vill utesluta alla Typescript-filer som finns i node_modules-mappen från kompilering.

Min förståelse är att tsconfig.json-filer i allmänhet ansvarar för att utesluta vissa filer eller kataloger från att kompileras (se denna fråga), men att .csproj-filerna i ett ASP.NET-projekt kommer att ha företräde framför tsconfig.json. Så jag försöker lista ut vad jag ska skriva i .csproj-filen för att tala om för MSBuild och tsc.exe att inte kompilera specifika filer eller mappar.

Dokumentationen för MSBuild Typescript-kompilatoralternativ är inte hjälpsam. Har någon någon insikt om detta?

Svar #1

En .csproj-fil bör endast ha dina applikationsfiler listade för kompilering. Om du har inkluderat något från node_modules skulle jag utesluta den mappen från ditt projekt. Detta är för att förhindra konstiga kompilationsförsök från VS:s TypeScript-kompilator från det hållet. Sedan, i din tsconfig.json skulle du ha exclude: ['node_modules', 'typings'] (om du använder @types istället för typings så kommer du uppenbarligen inte ha en typings-mapp). Samma sak, bara för att förhindra att kompilatorn rör de mapparna.

Exempel på tsconfig.json med exkluderingsinställningen på plats:

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules", "typings"
  ] 
}

För att ta saker ett steg längre och förhoppningsvis spara dig lite tid när du bestämmer dig för att distribuera din app tror jag att du bör överväga följande:

När det gäller distribution eller publicering - även om du skulle kunna publicera hela mappen och dess undermappar är det enormt och tidskrävande. Det fanns en annan, liknande, fråga där försök att publicera node_module låste upp en utvecklares dator och slutligen krascha hans VS.

Att försöka manuellt hitta och inkludera alla beroenden är a) mycket tidskrävande och b) sannolikt att göra dig galen när du ska se till att allt är inkluderat och bara en gång. Jag hade övervägt att göra något sådant och avvisade det.

På gott och ont betyder npm och node_modules mixat med Windows och ASP.NET att den enklaste vägen med mest nytta är att lära sig ett ytterligare verktygsset för att paketera din applikation. Dokumentationen är lite skakig om du till exempel är tillräckligt dum för att använda Webpack 2 (i beta, vilket jag gjorde) men resultatet är att du kan ha ditt npm-skript, gulp-task eller vad du än använder för att bygga endast det du behöver för distribution. Jag har en node_modules-mapp på över 150 MB och i slutändan får jag en 1 MB (produktions-)uppsättning JS-filer (tree shaking är fantastiskt och jag älskar det).

Verktygen att överväga är SystemJSBuilder med GulpJS (om du redan använder SystemJS är detta en naturlig väg att gå), Rollup (detta hade ett problem med TypeScript-gränssnitt och det problem jag skickade in listades som känt och utan en bra lösning), Webpack, och jag är säker på att det finns fler som jag glömmer och troligtvis även har provat.

Det finns ett antal handledningar för varje tillgänglig, och varje har ett aktivt community runt sig. Angular-teamet har en webpack-handledning som är en bra start om du tar den vägen: https://angular.io/docs/ts/latest/guide/webpack.html

SystemJS builder-teamet har sin egen dokumentation: https://github.com/systemjs/builder men jag tror att du behöver kombinera den med gulp-dokumentation för att lära dig hur det passar ihop.

Rollup är lite mindre utvecklat så jag använde deras dokumentation http://rollupjs.org/guide/ och exempel såsom https://github.com/manfredsteyer/angular2-aot-webpack2-rollup

Svar #2

Jag behövde också lägga till den här raden i min csproj-fil.

<TypeScriptCompile Remove="ClientApp\node_modules\**" />