在 wwwroot 之外调试 TypeScript 文件答案

【问题标题】：Debugging TypeScript files outside wwwroot在 wwwroot 之外调试 TypeScript 文件
【发布时间】：2016-10-30 19:50:46
【问题描述】：

我应该如何在 ASP.NET 5 中调试 TypeScript 文件？假设解决方案布局如下图所示。注意 .ts 脚本位于 wwwroot 文件夹之外，编译后的 .js 文件通过 Grunt 任务到达那里。该任务还会创建引用原始 .ts 文件的 .map 文件。

但是请注意，该引用超出了 wwwroot (../Scripts/app.ts)。这显然在浏览器中不起作用。

有什么想法吗？

【问题讨论】：

你为什么不把你的 .ts 复制到 wwwroot 呢？
VS 会抱怨重复的标识符，因为相同的类将在 2 个地方定义。
我也不认为将不必要的文件放在 wwwroot 中是我们应该的工作方式。
这只是为了调试，我会在发布时删除
抱怨仅打开单个文件 :( 我创建了一个解决方案，其中包含一个中间件，该中间件从 wwwroot 外部提供 .ts 文件。我仍然想知道 ASP.NET 团队如何设想这应该完成正确。

标签： typescript asp.net-core

【解决方案1】：

我在 Visual Studio 2015 Update 1 中仍然遇到完全相同的问题。我通过在 Startup.cs 中使用以下代码 sn-p 解决了它：

public void Configure(IApplicationBuilder app, IHostingEnvironment env, IApplicationEnvironment appEnv)
{
    app.UseStaticFiles();
    if (env.IsDevelopment())
    { 
        app.UseFileServer(new FileServerOptions()
        {
            FileProvider = new PhysicalFileProvider(System.IO.Path.Combine(appEnv.ApplicationBasePath, "App")),
            RequestPath = new PathString("/App"),
        });
    }
}

我所有的 TypeScript 文件都在 /App

下

【讨论】：

我发现这个答案是 ASP.NET Core MVC 开发下最干净的解决方案，并且最好地遵循所需的准则。
这在 ASP.Net Core 1.0 发布后现在不会编译了，我已经在下面发布了一个更新的代码来支持这个绝妙的想法：stackoverflow.com/a/40328737/1671558

【解决方案2】：

更新 ASP.Net Core 版本以获得良好的 stef 答案（现在无法编译）：

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseFileServer(new FileServerOptions()
        {
            FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "Scripts")),
            RequestPath = new PathString("/app"),
        });
    }
}

【讨论】：

RequestPath 的名称与物理路径不同，这似乎不太有效，因为 Visual Studio 不知道此路径映射。

【解决方案3】：

我在其中一个控制器中添加了以下操作，其中appEnvironment 是注入到您的控制器中的IApplicationEnvironment：

#if DEBUG

[ExcludeFromCodeCoverage]
[Route("Scripts/{*pathInfo}", Order = 500)]
public IActionResult TestTypescript(string pathInfo, System.Threading.CancellationToken cancellationToken)
{
    var path = appEnvironment.ApplicationBasePath + "/Scripts/" + pathInfo;
    if (System.IO.File.Exists(path) && pathInfo.EndsWith(".ts"))
    {
        return File(path, "application/javascript");
    }
    else
    {
        return HttpNotFound();
    }
}

#endif

方便的是，新的网络服务器去掉了 ../（我假设是出于安全目的），所以您甚至不必担心将它们放在 Route 中。（请注意，控制器本身不需要 [RoutePrefix] 属性才能使这些路径起作用。）

【讨论】：

几乎可以工作。不得不替换： var path = System.IO.Directory.GetCurrentDirectory() + "/Scripts/" + pathInfo;与：var path = appEnvironment.ApplicationBasePath + "/Scripts/" + pathInfo;并添加一个构造函数：IApplicationEnvironment appEnvironment；公共 HomeController(IApplicationEnvironment appEnvironment) { this.appEnvironment = appEnvironment; }
这是一个更好的方法；我会更新答案！
不会在 ASP.NET 核心中工作，因为 File(path...) 需要一个虚拟路径并且不能在 wwwroot 之外。请参阅@Ilya 对 ASP.NET Core 的回答

【解决方案4】：

我偶然发现了同样的问题。现在，使用 Visual Studio 2015 Update 1，我设法通过将 tsconfig.json 放置在项目根目录中并包含以下内容（注意排除）来克服这个问题：

{
  "compilerOptions": {
    "module": "amd",
    "noImplicitAny": false,
    "sourceMap": false,
    "target": "es5"
  },
  "exclude": [
    "wwwroot",
    "bower_components",
    "node_modules"
  ]
}

有了这个，你可以让你的任务运行器将 *.ts 文件复制到 wwwroot 并且 VS 不会抱怨重复。事实上，它会完全忽略排除部分路径下的所有文件。

【讨论】：

【解决方案5】：

如果我将 Internet Explorer 设置为 Visual Studio 中的调试浏览器，我正在使用 Visual Studio 2015 RC，并且默认情况下调试 wwwroot 文件夹之外的脚本可以正常工作。

这也让您有机会直接在 Visual Studio IDE 中设置断点。

【讨论】：