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。

您现在可以使用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

1 个答案: