Visual Studio + ASP.NET Core + TypeScript - 谁编译 *.ts 文件？

Question

我对于什么能够为我编译TypeScript文件感到困惑，以及何时可以进行编译。以下是需要翻译的内容：

• 在保存时使用Visual Studio。
• Mads Kristensen的扩展。
• Gulp.js。
• Node.js。
• 其他方法。

TypeScript文件应该放在哪里：

• ..\app\*.ts
• ..\wwwroot\app\*.ts

如何使TypeScript编译变得超级快，并获得自动更新或浏览器中立即生效的自动部署？

在像TeamCity这样的构建服务器上会发生什么？

另外，同样适用于LESS吗？

- Den

Answer 1

在我的个人项目中,我使用gulp来构建.less和.ts文件。它的工作原理如下：

gulp.task('processTypeScript', function () {
    gulp.src('Content/TypeScript/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts(tsOptions)).js
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./wwwroot/content/script'));
});
gulp.task('build', ['copyLibs', 'processTypeScript', 'processLess']);

第一个任务是生成带有sourcemaps的typescript文件，并将结果复制到wwwroot文件夹中，第二个任务是完全构建所有客户端代码 — 我不会描述所有这些任务，它们是相同的。

为了方便开发，我使用watch机制，所以这很容易:

gulp.task('watch', ['processTypeScript', 'processLess'], function () {
    gulp.watch('Content/TypeScript/**/*.ts', ['processTypeScript']);
    gulp.watch('Content/Less/**/*.less', ['processLess']);
});

现在，任何更改typescript文件都将被重新编译。

我使用以下方法向html添加文件：

<environment names="Development">
    <script asp-src-include="~/content/script/**/*.js" asp-append-version="true"></script>
    <link rel="stylesheet" asp-href-include="~/content/style/**/*.css" asp-append-version="true" />
</environment>

注意 asp-append-version — 这会防止浏览器缓存。

最后，你可以通过 gulp 构建压缩混淆的脚本和样式文件，用于生产环境配置，并在页面中使用 <environment names="Production"> 标记引入它们。

因此，这对我来说非常方便。我已经添加了 build 和 watch 任务，在项目打开时不必担心编译脚本和样式。

- user3272018

Answer 2

常见情况下，Visual Studio在保存 .ts 文件时可以将其编译为项目中的 .js 文件。

你可以在两个位置放置 TypeScript。

如果你选择 ..\app\*.ts，则需要使用 gulp 来帮助你将 js 放入 wwwroot。
并且你可能需要在开发过程中使用 gulp 监视 ts 文件以便自动更新。

如果你选择 ..\wwwroot\app\*.ts，则 js 可以在浏览器中自动更新。但用户也可以获取你的 ts 文件。

除非你显式地使用 tsc 编译它，否则 TeamCity 可能不会编译 ts。

- qin

Answer 3

目前我了解到，VisualStudio模板在xproj中没有后期构建指令来编译TypeScript。尽管这可能会在工具预览版发布时进行更改。

在我的当前设置中，我依赖于npm TypeScript包和一个Gulp任务，同时创建我的TypeScript项目的.js输出和sourcemaps。

我有一个文件夹包含所有的TypeScript源文件，位于我的wwwroot/app下。

- wwwroot
  - app
      - typings
        - globals
        index.d.ts
      app.ts
      tsconfig.json
      tslint.json

这是我用于构建JavaScript和源映射的gulp任务：

gulp.task('build:ts', false, function () {
    var tsProject = $.typescript.createProject(app + 'tsconfig.json', { sortOutput: true });
    var stream = tsProject.src();
    return stream.pipe($.sourcemaps.init())
                 .pipe($.typescript(tsProject))
                 .pipe($.sourcemaps.write('.', { includeContent: false, sourceRoot: '' }))
                 .pipe(gulp.dest(app));
});

最后但并非最不重要的是我使用typings来获取TypeScript定义。

如果您有一个完整的前端故事来构建脚本（包括Less）。那么构建服务器可以恢复您的npm devdependencies并运行您的gulp任务以很好地构建您的前端代码。同样适用于Visualstuio在线构建任务。

- cleftheris

---

我刚刚注意到我的project.json文件中也有一个“tsc”调用。 - Den

你的方法的缺点是部署 *.ts 文件并有可能将它们提供给浏览器。这不是问题，但也不够整洁。你应该将编译结果从其他文件夹复制到 wwwroot 中。https://www.typescriptlang.org/docs/handbook/asp-net-core.html - Den

@Den 如果这是一个问题，您可以选择从发布中排除 *.ts 文件，&TeamCity 将尊重该设置。这可以在 publishOptions 设置下的 project.json 文件中完成。 "exclude": ["*.ts"] - cleftheris

Answer 4

这个也让我有点困惑。

使用 .net core，我不需要单独编译 TypeScript，无论是从 IDE 还是使用 dotnet build 命令行构建。

tsconfig.json 文件似乎决定了 TypeScript 的构建。

JS 和 MAP 文件会在与 TS 文件相同的文件夹中创建，使得整个过程非常干净。

我已经上传了所有的工作内容。请参见：https://github.com/MikeyFriedChicken/DotNetCoreTypeScript

非常感谢

迈克尔

- Michael Ceber