Question

我使用JavaScript bundler将我所有已编译的TypeScript文件捆绑到一个文件中。

作为魅力，除了一件事：TypeScript的调试不起作用（TypeScript中的断点不会被触发）。如果文件是独立包含的，没问题。

但对我来说这是一个问题。我的项目中有很多TypeScript文件（模块），我希望将它们包含在某些视图中，而有些则不包括在内。我当然不想保留我在多个cshtml文件中复制的完整模块列表。它会使添加一个新文件或重构一个噩梦。

所以现在我的bundler配置如下（在bundlerconfig.json中）：

[
    {
        "outputFileName": "wwwroot/css/site.min.css",
        "inputFiles": [
            "wwwroot/css/site.css"
        ]
    }
    ,
    {
        "outputFileName": "wwwroot/js/modules.min.js",
        "includeInProject": false,
        "inputFiles": [
            "wwwroot/modules/**/*.js"
        ],
        "sourceMap": true,
        "minify": {
            "enabled": true,
            "renameLocals": true
        }
    }
]

这是我的tsconfig.json：

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es5"
  }
}

这是一个使用它的视图标题（Logon.cshtml）：

@section scripts {
    <script src="~/js/modules.min.js"></script>
}
<!-- view definition ... -->

所以，我添加了一个新的TypeScript类，它是自动编译和捆绑的。但是我无法在Visual Studio中调试它。如果我添加单个文件，我可以。

我需要调试，但我也需要在一个地方使用我的模块列表。将数十个script标签添加到多个cshtml文件中是疯狂的。

这有一个明智的解决方案吗？我可以以某种方式生成将TypeScript文件映射到捆绑和缩小的公共文件的源映射吗？

Answer 1

这是我对这个问题的部分解决方案：

@section scripts {
#if DEBUG
Html.RenderPartial("Modules.cshtml");
#else
<script src="~/js/modules.min.js"></script>
#endif
}

文件Modules.cshtml包含项目中使用的每个生成的JS的所有脚本标记。它仅用于调试配置（因此加载了单独的文件），在捆绑的发布配置中使用了缩小版本。

需要手动更新Modules.cshtml文件，因此它不是最佳的。

尽管如此，我还是希望将多个TypeScript文件映射到一个JavaScript包。

如何在.NET Core项目中调试捆绑的TypeScript文件？

1 个答案: