7

我试图让 Babel 在从命令行运行时生成源映射。围绕 sourcemaps的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 步骤以生成将我的最终 app.js 映射回我的 typescript 源的新源映射？

4

2 回答 2

7

Here's how I made it work. In your tsconfig.json you'll need the following options:

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

Then when you run babel-cli, you'll need to pass --source-maps inline. Here's an example npm script that assumes tsc outputs to a build directory and that babel will output to the same directory:

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

于 2016-06-13T21:52:52.150 回答
3

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

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

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

不是很满意。:-(

于 2016-06-13T03:53:29.157 回答