使用命令行Babel的Typescript源图

Question

我正在尝试让Babel从命令行运行时生成源地图。围绕源地图的Babel文档似乎更多地针对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。

然后，我对app.js运行babel：

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步骤以生成一个新的sourcemap，将我的最终app.js映射回我的打字稿源？

Answer 1

这就是我的工作方式。在tsconfig.json中，您需要以下选项：

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

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

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

Answer 2

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

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

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

不太令人满意。:-(