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

Question

我在我的解决方案中有一组打字稿文件,我正在使用Visual Studio 2017中的typescript功能将这些文件编译为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 的有限工具集走得很远。

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

{
  "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 加载器导入捆绑的 javascript 文件，例如almond.js：

<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>