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

回答

相关问题