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

我感到困惑的是什么鬼编译打字稿文件对我来说，当：Visual Studio + ASP.NET Core + TypeScript - 谁编译* .ts？

Visual Studio中保存。
Mads Kristensen的扩展。
Gulp.js.
Node.js.
别的东西。

应该在哪里打字稿文件放在：

..\app\*.ts

如何使打字稿编译速度超快，并获得自动更新或立即自动部署浏览器中的效果？

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

PS：同样适用于LESS？

来源

2016-09-20 Den

通常，保存ts文件时，visual studio可以在项目中编译.ts到.js。

您可以在两处放置TypeScript。

如果您选择..\app\*.ts，您需要使用gulp帮助您将js放入wwwroot中。
而您可能需要gule才能在开发中观看ts文件，以便它可以自动更新。

如果您选择，js可以在浏览器中自动更新。但是用户也可以根据需要获取你的ts文件。

TeamCity可能不会编译ts，除非您明确地使用tsc进行编译。

来源

2016-09-20 16:19:52 qin

目前我的理解是，VisualStudio模板在xproj中没有编译后指示来完成打字稿的编译。尽管这在工具退出预览时可能会改变。

在我当前的设置中，我依靠npm typescript包和一个gulp任务来为我的打字稿项目创建.js输出和源代码。

我得到了含有我所有的打字稿源文件夹下我的wwwroot /应用

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

我gulp任务构建JavaScript和sourcemaps：

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)); 
});

最后但并非最不重要的我用分型获取打字稿定义。

如果你有一个完整的构建脚本的前端故事（少包括）。然后，构建服务器可以恢复您的npm devdependencies并运行您的gulp任务来构建您的前端代码。这同样适用于Visualstuio在线构建任务。

来源

2016-09-20 16:47:05 cleftheris

我只注意到我的project.json也有一个'''tsc'''调用。 – Den

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

https://github.com/Microsoft/TypeScript-Handbook/issues/387 – Den

在我的宠物项目中，我使用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并复制结果到wwwroot文件夹，第二个是完全的所有客户端代码的建筑 - 我没有描述所有这些任务，他们是一样的。

对于舒适的发展我用watch机制，所以它很容易：

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

现在打字稿文件将在它的任何变化进行重新编译。

添加文件的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">标签页上包含thay。

所以，这对我来说很舒服。我在项目打开时添加了build和watch任务，并且不关心编译脚本和样式。

来源

2016-09-21 07:42:55 user3272018

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

回答

相关问题