Grunt babel多個文件並保留源映射

我想用grunt和babel來傳輸一個文件夾中的所有js6文件，並最終生成一個連接的單個文件（js5）和一個工作源映射到原始es6文件。但是，sourcemapping不起作用。我的巴別塔，下面CONCAT設置：Grunt babel多個文件並保留源映射

"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"

我結束了首先是有很多的js文件和src地圖（tmp目錄）文件夾中。但將它們合併成一個文件完全可以與源映射混淆起來。

想法？另外，我可以以某種方式跳過臨時文件的製作，並將結果轉換爲concat？

來源

2015-09-14 Todilo

您可以運行的concat任務首先，然後在單個文件上運行帶有源映射選項的真實任務 –

@PrayagVerma，這使得它更好一些，因爲我可以調試es6代碼。不是從原始文件，但好，更好。 – Todilo

似乎有一個用於babel的inputSourceMap選項，但是讓它工作對我來說並不是微不足道的。 – Todilo

顛倒任務的順序將使這更容易。首先在JS文件上運行concat任務。對單個文件運行babel任務由以前concat任務有以下選項

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

創建後這裏script.js.map文件是concat任務生成的源映射文件的名稱。作爲inputSourceMap選項節選源地圖對象，我們通過它使用grunt.file API的readJSON方法

完整的步兵文件配置爲：

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' 
     } 
    }

示例項目：https://github.com/pra85/Grunt-Concat-Babel-Example

來源

2015-09-17 11:46:37

這工作，謝謝。我必須做的，以使其在Visual Studio任務運行器中工作是改變：inputSourceMap：function（）{ if（grunt.file.exists（'../ concatinated-es6.js.map'））{ return grunt.file.readJSON（'concatinated-es6.js.map'） } return''; （）否則，任務列表將崩潰。 – Todilo

+10

這個工作大部分時間，Grunt文件一直試圖在生成之前讀取源地圖。爲了解決這個問題，我註冊了一個在concat和babel之間運行的自定義任務，它將'inputSourceMap'選項加入到babel配置中。使我的Gruntfile.js看起來像這樣：http://jsbin.com/rijazetaxe/3/edit?js – BenJamin

根據[babel源代碼]（https://github.com/babel/babel/blob/e44cef34734b59d26b2f090acd7ab16d5570b05c/ packages/babel-core/src/transformation/normalize-file.js＃L29），解析源地圖json是不必要的。只要'inputSourceMap'是真的，Babel將總是從concat輸出中解析源映射註釋。更糟糕的是，如果它發現源映射註釋，它將忽略任何值，在這裏總是這樣。因此，這可能不會達到你的預期。 – user8808265

Grunt babel多個文件並保留源映射

回答

相關問題