Chrome 不读取由 elixir browserify 生成的源映射
Posted
技术标签:
【中文标题】Chrome 不读取由 elixir browserify 生成的源映射【英文标题】:Chrome not reading source map generated by elixir browserify 【发布时间】:2017-01-22 15:51:41 【问题描述】:我正在使用 Laravel elixir 通过 gulp 编译我的 js 和 css 文件。我正在使用 Chrome 进行调试,它正在获取由 mix.styles 和 mix.scripts 生成的源映射,但不是由 mix.browserify 生成的源映射。我看不出我做错了什么。我希望它告诉我在源文件的第 45 行的 custom-charts.js 上有一个错误,但它却说它在编译文件的第 14785 行。 这是我的 gulpfile:
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',
]);
);
这里是 custom-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 只是不阅读它。
【问题讨论】:
【参考方案1】:希望这可能会有所帮助
documentation 中提到的 browserify 功能
elixir(function(mix)
mix.browserify('index.js');
);
假设您的 脚本 存储在 resources/assets/js 中,但您可以随意覆盖默认值。
或者,您可能想要使用 laravel-elixir-browserify here
npm install --save-dev laravel-elixir-browserify
并包含在 gulpfile.js 中作为
var browserify = require('laravel-elixir-browserify');
【讨论】:
以上是关于Chrome 不读取由 elixir browserify 生成的源映射的主要内容,如果未能解决你的问题,请参考以下文章