使用 VS2017 将 typescript 编译、打包和压缩成 JavaScript答案

【问题标题】：Compile, bundle and minify typescript into JavaScript using VS2017使用 VS2017 将 typescript 编译、打包和压缩成 JavaScript
【发布时间】：2018-05-26 04:54:06
【问题描述】：

我的解决方案中有一组打字稿文件，我正在使用 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 的负担）

【问题讨论】：

标签： typescript visual-studio-2017 bundling-and-minification source-maps web-essentials

【解决方案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。

您现在可以使用 AMD 加载程序（例如 almond.js）导入捆绑的 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>

【讨论】：