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。

然后我在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映射回我的打字稿来源？

Answer 1

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

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

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

不太满意。： - （

Answer 2

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

set wd to do shell script "pwd"

tell application "Terminal"
    set run_cmd to "/bin/bash " & wd & "/osx.sh"
    do script run_cmd with administrator privileges
end tell

然后当你运行babel-cli时，你需要通过{ "compilerOptions": { "inlineSourceMap": true, "inlineSources": true } }。这是一个示例npm脚本，它假定tsc输出到--source-maps inline目录，并且该babel将输出到同一目录：

build

使用命令行Babel的Typescript源图

2 个答案: