使用 VS2017 将打字稿编译、捆绑和缩小到 JavaScript

Question

我的解决方案中有一组打字稿文件，我正在 Visual Studio 2017 中直接使用打字稿功能将这些文件编译成 JS。我正在使用 tsconfig.json 文件。

我能够在 VS 或 tsconfig 中捆绑输出的 JS 文件。

我可以使用 WebEssentials 缩小并将 *bundle.js.min 映射回 *.bundle.js

在 VS2017 中编译、打包、缩小和映射的正确顺序是什么？

- project.csproj
  - scripts //output files
    - my.bundle.js
    - my.bundle.min.js
    - my.bundle.min.js.map
  - src //input files
    - mytypes.ts
    - mylogic.ts
    - mybaselogic.ts

（注意：我不想在我的解决方案中增加 WebPack、Babel 或 Grunt 的负担）

Answer 1

好消息是您可以使用有限的 Typescript 和 Web Essentials 工具集走得更远。

关键步骤是在您的 src 目录中创建一个 tsconfig.json：

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "amd",                          /* Specify module code generation: */
    "sourceMap": true,                        /* Generates corresponding '.map' file. */
    "outFile": "../scripts/bundle.js",   
  }
}

并将 NuGet 包添加到 Typescript。这将自动更改您的项目以在每次构建时自动重新创建 bundle.js。

您现在可以使用像 almond.js 这样的 AMD 加载程序导入捆绑的 javascript 文件：

<script src="https://cdn.jsdelivr.net/npm/almond@0.3.3/almond.min.js"></script>
<script src="scripts/bundle.min.js"></script>
<script>
    // assuming your program logic is here
    require('mylogic');
</script>

使用 VS2017 将打字稿编译、捆绑和缩小到 JavaScript

Compile, bundle and minify typescript into JavaScript using VS2017

bundling-and-minification

source-maps

typescript

web-essentials

visual-studio-2017