Chrome瀏覽器不能讀取由elixir生成的源代碼地圖browserify

我正在使用Laravel elixir來編譯我的js和css文件。我使用Chrome進行調試，並且它將獲取mix.styles和mix.scripts生成的源地圖，但不會生成mix.browserify生成的源地圖。我看不到我做錯了什麼。我希望它告訴我，在源文件的第45行的custom-charts.js上有錯誤，但是它表示它在編譯文件的第14785行。這裏是我的gulpfile：Chrome瀏覽器不能讀取由elixir生成的源代碼地圖browserify

var elixir = require('laravel-elixir'); 

elixir(function(mix) { 

    mix.less('app.less', 'resources/assets/css') 

     .styles([ 
      'libs/jquery-ui.min.css', 
      'libs/jquery-ui.structure.min.css', 
      'libs/jquery-ui.theme.min.css', 
      'libs/select2.min.css',   
      'app.css' 
     ]) 

     .browserify('custom-charts.js') 

     .scripts([ 
      'libs/jquery.min.js', 
      'libs/bootstrap.min.js', 
      'libs/select2.min.js', 
      'libs/jquery-ui.min.js', 
      'libs/vue.js', 
      'plugin-options.js', 
      'custom-jquery.js', 
      'custom-vue.js', 
     ]); 
});

這裏是定製charts.js：

import Chart from 'chart.js'; 

var ctx = document.getElementById("graph").getContext("2d"); 

var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [12, 19, 3, 5, 2, 3], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)', 
       'rgba(153, 102, 255, 1)', 
       'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
}); 

new Vue({ 
    el: 'body', 

    components: { Graph } 
});

它確實能產生custom-charts.js.map文件，編譯腳本並說這在結束：//# sourceMappingURL=custom-charts.js.map。 Chrome瀏覽器並沒有閱讀它。

來源

2016-09-14 Erin

希望這可以幫助有點

的browserify功能作爲documentation

elixir(function(mix) { 
    mix.browserify('index.js'); 
});

提假定您腳本存儲在資源/資產/ JS，儘管你可以自由地覆蓋默認值。

另外，你可能想使用laravel-仙丹，browserifyhere

npm install --save-dev laravel-elixir-browserify

，包括在gulpfile.js作爲

var browserify = require('laravel-elixir-browserify');

來源

2016-10-18 22:12:00

Chrome瀏覽器不能讀取由elixir生成的源代碼地圖browserify

回答

相關問題