从 MSBuild Typescript 编译中排除目录

Question

我有一个 ASP.NET MVC / Angular2 项目，它使用 MSBuild 来编译我的 Typescript 文件。除了我的 Angular2 代码（app.ts 等）之外，该项目还包含整个 Angular2 源代码及其 NodeJS 依赖项。

我的问题是 MSBuild 正在编译整个解决方案中的每个 Typescript 文件——包括 Angular2 源代码、它的依赖项和我的 app.ts 代码。我想从编译中排除位于 node_modules 文件夹中的所有 Typescript 文件。

我的理解是tsconfig.json文件一般负责排除某些文件或目录被编译（参见this question），但是[=30=中的.csproj文件] 项目将在 tsconfig.json 上进行。所以我想弄清楚在 .csproj 文件中写什么来告诉 MSBuild 和 tsc.exe not 编译特定文件或文件夹。

MSBuild Typescript compiler options documentation 没有帮助。有人对此有任何见解吗？

Answer 1

.csproj 文件应该只列出您的应用程序文件以供编译，如果您包含 node_modules 中的任何内容，我会将该文件夹从您的项目中排除。这是为了防止 VS 的 TypeScript 编译器从那个角度进行任何奇怪的编译尝试。然后，在您的 tsconfig.json 中您将拥有 exclude: ['node_modules', 'typings'] （如果您使用@types 而不是 typings 那么显然您将没有 typings 文件夹）。同样的事情，只是防止编译器接触这些文件夹。

包含排除的示例 tsconfig.json：

{
  "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"
  ] 
}

为了更进一步，并希望在您决定部署应用程序时为您节省一些时间，我认为您应该考虑以下几点：

当谈到部署或发布时 - 虽然您可以发布整个文件夹及其子文件夹，但这非常耗时。还有另一个类似的问题，尝试 node_module 发布会锁定开发者的盒子并最终使他的 VS 崩溃。

尝试手动查找并包含所有依赖项 a) 非常耗时并且 b) 可能会让您发疯，确保包含所有内容并且只包含一次。我曾考虑过做这样的事情，但拒绝了。

无论好坏，npm 和 node_modules 与 Windows 和 ASP.NET 混合意味着阻力最小且收益最大的途径是学习一套额外的工具来捆绑您的应用。如果您笨到可以使用 Webpack 2（在测试版中，我就是这样做的），那么文档有点不稳定，但结果是您可以拥有 npm 脚本任务、gulp 任务或任何构建只输出部署所需的内容。我有一个 150+MB node_modules 的文件夹，一天结束时我得到了一组 1MB（生产）的 JS 文件（tree shaking 很棒，我喜欢它）。

要考虑的工具是带有 GulpJS 的 SystemJSBuilder（如果您已经在使用 SystemJS，这是一个自然的途径）、Rollup（这与 TypeScript 接口有问题，我提交的问题被列为已知且没有一个很好的修复），Webpack，我敢肯定还有更多我忘记了甚至可能尝试过的东西。

每个教程都有许多教程，每个教程都有一个健康的社区。 Angular 团队有一个 webpack 教程，如果你走这条路，这是一个很好的开始：https://angular.io/docs/ts/latest/guide/webpack.html

SystemJS 构建团队有自己的文档：https://github.com/systemjs/builder 但我相信您需要将它与 gulp 文档结合起来以了解它们是如何组合在一起的。

Rollup 开发的有点少，所以我使用了他们的文档 http://rollupjs.org/guide/ and examples such as https://github.com/manfredsteyer/angular2-aot-webpack2-rollup

Answer 2

我还需要将这一行添加到我的 csproj 文件中。

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

从 MSBuild Typescript 编译中排除目录

Exclude directory from MSBuild Typescript compilation

msbuild

asp.net-mvc

csproj

typescript

angular