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？

回答

相關問題