如何获取 js.map 文件以使用 UMD 模块？答案

【问题标题】：How to Get js.map Files to Work With UMD Modules?如何获取 js.map 文件以使用 UMD 模块？
【发布时间】：2018-11-28 14:29:29
【问题描述】：

我有以下 TS 文件：

地图测试

module Test
{
    export function myTest() {
        const zero = 0;
        const two = zero + 2;
        const four = two + two;
        const six = four + two;
        console.log(six);
    }
}

MapModuleTest.ts

export module Test
{
    export function myTest() {
        const zero = 0;
        const two = zero + 2;
        const four = two + two;
        const six = four + two;
        console.log(six);
    }
}

当我尝试在 Chrome 或 FireFox 中设置断点并调试 MapTest 的 TypeScript 时，一切正常。当我尝试调试MapModuelTest.ts 时，TypeScript 行在 Chrome 和 Firefox 中似乎比实际的 JS 提前两行。因此，如果我在这一行 const six = four + two; 上设置一个断点，它的作用就好像 JS 真的在这一行上中断 const two = zero + 2;（即 zero 被定义为 0，但 two 是 undefined）

这是一个已知的错误吗？ UMD 生成是否需要一些不同的东西才能为 .map 文件正常工作？

调试器窗口更有趣的是本地与控制台不匹配。

这里是相关的JS和Map文件

MapTest.js

var Test;
(function (Test) {
    function myTest() {
        var zero = 0;
        var two = zero + 2;
        var four = two + two;
        var six = four + two;
        console.log(six);
    }
    Test.myTest = myTest;
})(Test || (Test = {}));
//# sourceMappingURL=MapTest.js.map

MapTest.js.map

{"version":3,"file":"MapTest.js","sourceRoot":"","sources":["MapTest.ts"],"names":[],"mappings":"AAAA,IAAO,IAAI,CASV;AATD,WAAO,IAAI;IAEV;QACC,IAAM,IAAI,GAAG,CAAC,CAAC;QACf,IAAM,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC;QACrB,IAAM,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;QACvB,IAAM,GAAG,GAAG,IAAI,GAAG,GAAG,CAAC;QACvB,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAClB,CAAC;IANe,WAAM,SAMrB,CAAA;AACF,CAAC,EATM,IAAI,KAAJ,IAAI,QASV"}

MapModuleTest.js

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Test;
    (function (Test) {
        function myTest() {
            var zero = 0;
            var two = zero + 2;
            var four = two + two;
            var six = four + two;
            console.log(six);
        }
        Test.myTest = myTest;
    })(Test = exports.Test || (exports.Test = {}));
});
//# sourceMappingURL=MapModuleTest.js.map

MapModuleTest.js.map

{"version":3,"file":"MapModuleTest.js","sourceRoot":"","sources":["MapModuleTest.ts"],"names":[],"mappings":";;;;;;;;;;;IAAA,IAAc,IAAI,CASjB;IATD,WAAc,IAAI;QAEjB;YACC,IAAM,IAAI,GAAG,CAAC,CAAC;YACf,IAAM,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC;YACrB,IAAM,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;YACvB,IAAM,GAAG,GAAG,IAAI,GAAG,GAAG,CAAC;YACvB,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAClB,CAAC;QANe,WAAM,SAMrB,CAAA;IACF,CAAC,EATa,IAAI,GAAJ,YAAI,KAAJ,YAAI,QASjB"}

【问题讨论】：

标签： javascript typescript google-chrome-devtools firefox-developer-tools

【解决方案1】：

我已将此记录为错误。希望这可以得到解决：

https://github.com/Microsoft/TypeScript/issues/25079

更新

这似乎是我用来 pollyfill 承诺的 es6-promise 库的问题。一旦我切换到某个 >= es6 的东西进行编译，映射就会正常工作。

【讨论】：