2015-09-14 9 views
9

私はgruntとbabelを使用して、フォルダ内のすべてのjs6ファイルを翻訳し、元のes6ファイルへの動作中のソースマップを含む連結シングルファイル(js5)を作成しようとしています。ただし、ソースマッピングは機能しません。私のバベル、以下の連結の設定:私はJSファイルとSRCマップ(tmpディレクトリ)の多くに、まずフォルダに終わるのです複数のファイルをまとめてソースマッピングを保存する

"babel": { 
     options: { 
      sourceMap : true 
     }, 
     dist: { 
      files:[ 
       { 
        expand: true, 
        cwd: 'wwwroot/js/src', 
        src: ['*.js'], 
        dest: 'tmp/js' 
       }] 
     } 
    }, 

    concat: { 
     options: { 
      sourceMap: true 
     }, 
     js: { 
      src: [ 
       'tmp/js/*.js', 
      ], 
      dest: 'wwwroot/js/app.js' 
     } 
    } 

Versions: 
"grunt": "0.4.5", 
"grunt-bower-task": "0.4.0", 
"grunt-babel": "5.0.1", 
"grunt-contrib-concat" : "0.5.1" 

。しかし、それらを1つのファイルにまとめると、完全にソースマッピングが崩れます。

アイデア?また、私は何とか一時ファイルの作成をスキップし、ちょうどその結果をconcatにパイプすることができますか?

+0

concat: { options: { sourceMap: true }, js: { src: ['Modules/**/js/*.js'], dest: 'script.js' } }, babel: { dist: { options: { sourceMap: true, inputSourceMap: grunt.file.readJSON('script.js.map') }, src: [ 'script.js', ], dest: 'app.js' } } 

例プロジェクト:inputSourceMapオプションは、ソースマップオブジェクトをexceptsでように、我々は完全な兵卒のファイル構成は以下のようになりgrunt.file APIのreadJSON方法

を使用して、それを渡しますまずは単一のファイル上で、ソースマップオプションの真であるバーベルタスクを実行してください –

+0

@PrayagVermaこれは、es6コードをデバッグできるので、少し上手くなります。元のファイルからではなく、うまくいっています。 – Todilo

+0

babelのinputSourceMapオプションがあるようですが、それを動作させることは私にとっては些細なことではありません。 – Todilo

答えて

14

タスクの順序を逆にすると、これはずっと簡単になります。まず、concatタスクをJSファイルで実行します。その実行後、以下のオプション

options: { 
       sourceMap: true, 
       inputSourceMap: grunt.file.readJSON('script.js.map') 
      }, 

で以前concatタスクによって作成された単一のファイルにbabelタスクはここscript.js.mapファイルがconcatタスクによって生成されたソースマップファイルの名前です。あなたは、連結タスクを実行することができhttps://github.com/pra85/Grunt-Concat-Babel-Example

+2

これは動作します、ありがとうございます。私はそれをビジュアルスタジオのタスクランナーで動作させるために何をしなければならなかったのですか?inputSourceMap:function(){ if(grunt.file.exists( '../ concatinated-es6.js.map')){ return grunt.file.readJSON( 'concatinated-es6.js.map') } リターン ''; } そうしないと、タスクリストがクラッシュします。 – Todilo

+10

これはほとんどの場合、Gruntファイルは生成される前にソースマップを読み込もうとしていました。この問題を解決するために、私は、バッチ設定に 'inputSourceMap'オプションを追加する、concatとbabelの間で実行されるカスタムタスクを登録しました。私のGruntfile.jsを次のようにしてください:http://jsbin.com/rijazetaxe/3/edit?js – BenJamin

+0

[babelソースコード](https://github.com/babel/babel/blob/e44cef34734b59d26b2f090acd7ab16d5570b05c/)によると、パッケージ/ babel-core/src/transformation/normalize-file.js#L29)、ソースマップjsonの解析は必要ありません。 Babelは、 'inputSourceMap'が真実である限り、常にコンカット出力からソースマップコメントを解析します。さらに悪いことに、ソースマップのコメントが見つかった場合は無視されます。これは常にここに当てはまります。したがって、これはおそらくあなたが期待することはしません。 – user8808265