Похоже, что sourceURL делается относительно по-разному в Firefox и Chrome - когда некоторые инструменты генерируют строки //# sourceURL=... в файлах JS, относящихся к файлу, в котором они размещены, Firefox обрабатывает URL-адрес относительно файла JS. в то время как Chrome вместо этого обрабатывает его как относительно исходного HTML-файла. Что является правильным, или есть более ясный способ заявить об этом?
В этом примере приложения я пытаюсь использовать sourceURL, чтобы разрешить объединение множества файлов меньшего размера в один большой файл, но при этом браузер знает, как должен называться файл меньшего размера, и sourceMappingURL затем указать файл исходной карты относительно этого исходного файла.
Структура каталогов:
index.html
js/
all.js
uncompiled/
app.js
app.js.map
app.min.js
index.html - минимальная страница для загрузки js/all.js или js/uncompiled/app.min.js. Никакой другой JS не запекается в js/all.js (так как это минимальный пример), но в теории их здесь может быть много. Цель этого файла - просто объединить различные уменьшенные файлы JS в один больший файл, но при этом позволить разработчику увидеть исходный код и соответственно установить точки останова.
Содержимое app.js:
class App {
constructor(name) {
this.name = name;
}
sayHi() {
window.alert("Hello " + this.name);
}
}
new App("Colin").sayHi();
Затем, запустив простой минификатор, перестраивает его в app.min.js с соответствующим файлом app.js.map:
var App=function(a){this.name=a};App.prototype.sayHi=function(){window.alert("Hello "+this.name)};(new App("Colin")).sayHi();
//# sourceMappingURL=app.js.map
{
"version":3,
"file":"./app.min.js",
"lineCount":1,
"mappings":"AAAA,IAAMA,IAELC,QAAW,CAACC,CAAD,CAAO,CACjB,IAAAA,KAAA,CAAYA,CADK,CAIlB,IAAA,UAAA,MAAAC,CAAAA,QAAK,EAAG,CACPC,MAAAC,MAAA,CAAa,QAAb,CAAwB,IAAAH,KAAxB,CADO,CAKTC,EAAA,IAAIH,GAAJ,CAAQ,OAAR,CAAAG,OAAA;",
"sources":["app.js"],
"names":["App","constructor","name","sayHi","window","alert"]
}
И, наконец, этот минимизированный вывод обернут в eval, и в конец добавляется параметр sourceURL (разрывы строк добавляются для удобства чтения):
eval('var App=function(a){this.name=a};App.prototype.sayHi=function
(){window.alert("Hello "+this.name)};(new App("Colin")).sayHi();\n
//# sourceMappingURL=app.js.map\n//# sourceURL=uncompiled/app.min.js');
Если index.html прямо указывает на js/uncompiled/app.min.js, то и Firefox, и Chrome правильно понимают, что app.js.map находится в одном каталоге и должен использоваться при отладке. Однако, если index.html указывает вместо js/all.js, тогда, хотя оба браузера правильно отображают содержимое eval в отдельном файле, только Firefox делает путь относительно all.js.
Использование python -m http.server в этой структуре показывает следующие результаты в Firefox:
127.0.0.1 - - [14/Jun/2019 08:33:37] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [14/Jun/2019 08:33:37] "GET /js/all.js HTTP/1.1" 200 -
127.0.0.1 - - [14/Jun/2019 08:33:38] code 404, message File not found
127.0.0.1 - - [14/Jun/2019 08:33:38] "GET /favicon.ico HTTP/1.1" 404 -
127.0.0.1 - - [14/Jun/2019 08:33:41] "GET /js/uncompiled/app.js.map HTTP/1.1" 200 -
127.0.0.1 - - [14/Jun/2019 08:33:41] "GET /js/uncompiled/app.js HTTP/1.1" 200 -
С другой стороны, вот что пытается сделать Chrome:
127.0.0.1 - - [14/Jun/2019 08:34:22] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [14/Jun/2019 08:34:22] "GET /js/all.js HTTP/1.1" 200 -
127.0.0.1 - - [14/Jun/2019 08:34:22] code 404, message File not found
127.0.0.1 - - [14/Jun/2019 08:34:22] "GET /uncompiled/app.js.map HTTP/1.1" 404 -
127.0.0.1 - - [14/Jun/2019 08:34:23] code 404, message File not found
127.0.0.1 - - [14/Jun/2019 08:34:23] "GET /favicon.ico HTTP/1.1" 404 -
Похоже, что Chrome предполагает, что sourceURL в js/app.js относится к index.html, тогда как Firefox вместо этого (правильно, с моей точки зрения) интерпретирует его как относящийся к app.js. Я полагаю, что Firefox верен, так как это позволяет любому файлу HTML включать этот JS в любой путь, и при этом исходные карты по-прежнему загружаются правильно.
Примеры источников, включая два html-файла с разными относительными путями: https://github.com/niloc132/sourceurl-and-sourcemapping-url-relative-paths