7

コマンドラインから実行したときに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 は元の状態のままになります。つまり、2 つが一致しなくなります。

最終的な app.js を typescript ソースにマップする新しいソースマップを作成するためのバベル ステップを取得するにはどうすればよいですか?

4

2 に答える 2

7

これが私がそれを機能させた方法です。tsconfig.json には、次のオプションが必要です。

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

次に、babel-cli を実行するときに、 を渡す必要があります--source-maps inline。build以下は、tsc がディレクトリに出力され、babel が同じディレクトリに出力されることを前提とする npm スクリプトの例です。

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

于 2016-06-13T21:52:52.150 に答える
3

私はまったく同じものを探していて、これを見つけました: https://phabricator.babeljs.io/T6911

基本的に、高度なオプションも で使用できますがbabel --name=value、inputSourceMap のファイル名の指定は CLI からはサポートされておらず、コードを使用する場合にのみ使用できます。

TypeScript と Babel を使用した Gulp ソースマップが役立つ場合があります。有望と思われるJSファイルと元のTSファイルの両方を参照するソースマップを生成することができます。ただし、(その回答のコメントで述べたように)正しい sourceRoot を使用することもできないため、.js.map ファイルは実際には存在しないソースの場所を指しています。

あまり満足できません。:-(

于 2016-06-13T03:53:29.157 に答える