使用命令行 Babel 的 Typescript sourcemaps

Question

我试图让 Babel 在运行从命令行生成源映射。源地图周围的 Babel docs 似乎更多地针对 gulp 工作流程，我不确定它如何转化为命令行。

我正在使用

编译打字稿

tsc -p ./src

我的tsconfig.json:

{
    "compilerOptions": {
        "module": "amd",
        "noImplicitAny": true,
        "removeComments": false,
        "preserveConstEnums": true,
        "out": "wwwroot/app.js",
        "sourceMap": true,
        "target": "ES6"
    },
    "files": [
        "App.ts"
    ]
}

这会产生 wwwroot/app.js 和 wwwroot/app.js.map.

然后我运行 babel over app.js:

babel ./wwwroot/app.js -o ./wwwroot/app.js --presets es2015 --compact false --inputSourceMap ./wwwroot/app.js.map --sourceMaps both

这修改了 app.js，但保留了 app.js.map 的原始状态，这意味着两者不再对齐。

如何让 babel 步骤生成一个新的源映射，将我的最终 app.js 映射回我的 typescript 源？

Answer 1

我正在寻找完全相同的东西并找到了这个：https://phabricator.babeljs.io/T6911

基本上，虽然高级选项也可以与 babel --name=value 一起使用，但 CLI 不支持为 inputSourceMap 指定文件名，并且仅在使用代码时可用。

可能对您有所帮助。我可以让它生成引用 JS 和原始 TS 文件的源映射，这看起来很有希望。但是（如该答案的评论中所述）我似乎也无法让它使用正确的 sourceRoot，因此 .js.map 文件指向实际上不存在的源位置。

不太满意。 :-(

Answer 2

以下是我如何让它发挥作用的。在您的 tsconfig.json 中，您需要以下选项：

{
  "compilerOptions": {
    "inlineSourceMap": true,
    "inlineSources": true
  }
}

然后当你运行babel-cli时，你需要通过--source-maps inline。这是一个示例 npm 脚本，它假定 tsc 输出到 build 目录，而 babel 将输出到同一目录：

tsc && babel build -d build --source-maps inline

使用命令行 Babel 的 Typescript sourcemaps

Typescript sourcemaps using command-line Babel

javascript

typescript

tsc

babeljs