Как заставить исходные карты работать в Angular 4 и Laravel 5.6 (файлы .map отсутствуют после сборки) - PullRequest
Новая
       9

Как заставить исходные карты работать в Angular 4 и Laravel 5.6 (файлы .map отсутствуют после сборки)

0 голосов
/ 07 июня 2018

Я унаследовал приложение Laravel and Angular, и я пытаюсь набрать скорость.

Я запускаю скрипт оболочки, который в основном компилирует все в папку проекта ./public, а nginx обслуживает приложение оттуда.

Вот скрипт, который собирает все:

. / Compile-js.sh 

rm -rf ./public/*.{js,css,svg,woff2,ttf,woff,eot,map,json,html,txt}* ./public/fonts ./public/images ./angular-app/dist/
cd ./angular-app/
yarn install
yarn run build:dev
rm -f ./dist/*.{txt,map} #{txt,map}
cd ../
cp -r ./angular-app/dist/* ./public/

cssTemplate=./resources/views/angular/angular-css.blade.php
jsTemplate=./resources/views/angular/angular-js.blade.php

beginJs='<script type="text/javascript" src="'
endJs='"></script>'

beginInlineJs='<script type="text/javascript">'
endInlineJs='</script>'

beginStyle='<link rel="stylesheet" href="'
endStyle='"/>'

truncate -s 0 "$jsTemplate"
truncate -s 0 "$cssTemplate"

src="$(cat ./public/inlin*.bundle.js)"
echo "$beginInlineJs$src$endInlineJs" >> "$jsTemplate"

src="$(find ./public/ -name 'script*.bundle.js' -type f -exec basename {} \;)"
echo "$beginJs$src$endJs" >> "$jsTemplate"

src="$(cat ./public/sw-registe*.bundle.js)"
echo "$beginInlineJs$src$endInlineJs" >> "$jsTemplate"

src="$(find ./public/ -name 'polyfill*.bundle.js' -type f -exec basename {} \;)"
echo "$beginJs$src$endJs" >> "$jsTemplate"

src="$(find ./public/ -name 'vendo*.bundle.js' -type f -exec basename {} \;)"
echo "$beginJs$src$endJs" >> "$jsTemplate"

src="$(find ./public/ -name 'mai*.bundle.js' -type f -exec basename {} \;)"
echo "$beginJs$src$endJs" >> "$jsTemplate"

src="$(find ./public/ -name 'style*.bundle.css' -type f -exec basename {} \;)"
echo "$beginStyle$src$endStyle" >> "$cssTemplate"

Вот сценарии:

. / Angular-app / package.json 

"build": "ng build --env=prod --prod --aot --output-path ./dist",
"build:dev": "ng build --sourcemap=true --extract-css --env=dev --output-path ./dist",

Сегодня я изменил сценарий оболочки на yarn run build:dev (ранее он работал в режиме prod, что сильно затрудняло отладку).После этого Chrome Dev Tools сообщает, что обнаружены исходные карты, но я также вижу в консоли: 

DevTools failed to parse SourceMap: https://1.bundle.js.map
DevTools failed to parse SourceMap: https://2.bundle.js.map
DevTools failed to parse SourceMap: https://3.chunk.js.map

Я вижу, что в папке ./public нет файлов .map, поэтомуВероятно, поэтому я вижу это.

Куда мне обратиться, чтобы Webpack создал файлы карты?

  • мой tsconfig.json файл содержит "sourceMap": true,

  • во вкладке Источники инструментов разработчика нет области webpack://

1 Ответ

0 голосов
/ 07 июня 2018

Нашел ответ.Причина в показанном ./compile-js.sh файле.

Это виновник здесь: 

rm -f ./dist/*.{txt,map} #{txt,map}

Он создавал файлы карты, а затем удалял их перед копированием всего в ./public.

Изменил его на это и исправил: 

rm -f ./dist/*.{txt} #{txt}

Теперь я также использую этот сценарий разработки: 

"build:dev": "ng build --source-map --aot --extract-css --env=dev --output-path ./dist",

Вместо того, чтобы удалить этот вопрос, ясохранит это, потому что поиск Google для информации об этом материале был довольно ужасен.Может быть, это поможет кому-нибудь однажды.

...