从 MSBuild Typescript 编译中排除目录答案

【问题标题】：Exclude directory from MSBuild Typescript compilation从 MSBuild Typescript 编译中排除目录
【发布时间】：2023-09-04 00:51:01
【问题描述】：

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

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

我的理解是tsconfig.json 文件通常负责将某些文件或目录排除在编译之外（请参阅this question），但 ASP.NET 项目中的.csproj 文件将取代tsconfig.json。所以我想弄清楚在.csproj 文件中写什么来告诉MSBuild 和tsc.exe 不来编译特定的文件或文件夹。

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

【问题讨论】：

你没有使用 tsconfig.json 文件吗？我之所以问，是因为不清楚您是否已经通过在 .csproj 中包含文件或到底发生了什么来覆盖 exclude: []。
@silentsod 我正在使用tsconfig.json 文件。我最初的假设是.csproj 的功能类似，并且.csproj 附加在tsconfig.json 文件中的任何内容上——所以我假设有某种XML 语句可以包含在.csproj 文件中在项目构建时从编译中排除 Typescript 文件。但是，我查看了详细的 MSBuild 输出，它看起来像是找到了 tsconfig.json 文件并可能从中读取 - 所以我不确定 .csproj 在幕后做什么。
一个 .csproj 文件应该只列出您的应用程序文件以供编译，如果您包含来自 node_modules 的任何内容，我会从您的项目中排除该文件夹。无论如何，您不应该直接从 node_modules 发布任何内容。然后，在您的 tsconfig.json 中，您将拥有您的 exclude: ['node_modules', 'typings']（如果您使用的是 @types 而不是 typings，那么显然您将没有 typings 文件夹）。
我将结合一些 cmets 来尝试回答，您不是第一个遇到这些问题的 ASP.NET 人。当我在发现和学习过程中处于更进一步的阶段时，我有一点领先优势。就写出东西而言，它与 angularjs、纯 TypeScript 或纯 JavaScript 真的不一样。据我所知，NPM 带来了一整套附带的东西。
顺便说一句，如果您想在原始问题中包含关于发布和打包 node_modules 的第二个问题，这会使我的回复看起来不那么疯狂。

标签： asp.net-mvc angular typescript msbuild csproj

【解决方案1】：

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

带有 exclude 的 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 文件（摇树很棒，我喜欢它）。

需要考虑的工具是带有 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/ 和示例，例如 https://github.com/manfredsteyer/angular2-aot-webpack2-rollup

【讨论】：

非常感谢您非常有见地的回答。尝试将所有内容拼凑在一起：这里是否建议在构建/发布之前使用 GulpJS 将所有相关的 Angular2 内容（源文件；自定义模块和组件）编译/分组到项目目录中？
绝对是在发布之前，因为这使得发布/部署更容易，更轻量级。对于您的开发，可以说没有必要，除非您开始遇到严重的加载性能问题。我不知道您的目录结构是什么，但我们采用的方式是，在我们的生产构建中，将我们捆绑的文件放在与开发时完全不同的文件夹中，这意味着切换我们的

【解决方案2】：

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

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

【讨论】：