使用命令行 Babel 的打字稿源图答案

【问题标题】：Typescript sourcemaps using command-line Babel使用命令行 Babel 的打字稿源图
【发布时间】：2016-03-29 20:39:58
【问题描述】：

我试图让 Babel 在从命令行运行时生成源映射。 sourcemaps 周围的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。

然后我在 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 步骤以生成将我的最终 app.js 映射回我的 typescript 源的新源映射？

【问题讨论】：

我使用的命令行标志不正确。而不是--sourceMaps，我需要使用--source-maps。 “--input-source-map”似乎没有出现在命令行上...

标签： javascript typescript babeljs tsc

【解决方案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

【讨论】：

这行得通！但我很好奇它实际上是如何工作的。 Babel 是否将 tsc 编译的文件中的内联源映射作为输入，然后编写自己的源映射？如果我没有在 tsconfig.json 中设置 inlineSources 和 inlineSourceMap 怎么办？

【解决方案2】：

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

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

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

不是很满意。 :-(

【讨论】：

我最终将命令行 tsc 用于 TS 转译和 gulp 用于 babel 和 sourcemapping 的组合。我的 tsconfig.json 包含 '"sourceMap": true'，然后 gulp 作为构建后步骤运行，使用 sourcemaps.init({ loadMaps: true }) 加载 TS 源映射作为输入
我通过在源映射本身中包含源解决了不正确的 sourceRoot 问题（这是 gulp-sourcemaps 的默认行为）
"inputSourceMap is not supported from the CLI" 是我原来问题的公认答案:)