如何让源映射在 Angular 4 和 Laravel 5.6 中工作（构建后缺少 .map 文件）

Question

我继承了 Laravel 和 Angular 应用程序，我正在努力跟上进度。

我运行一个 shell 脚本，基本上将所有内容编译到项目的 ./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",

我今天刚刚将 shell 脚本更改为 yarn run build:dev（之前在生产模式下运行ning，调试非常困难）。现在，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:// 区域

Answer 1

找到答案了。原因在显示的 ./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 有关此内容的信息非常糟糕。也许有一天它会对某人有所帮助。

如何让源映射在 Angular 4 和 Laravel 5.6 中工作（构建后缺少 .map 文件）

How to get source maps working in Angular 4 and Laravel 5.6 (.map files are missing after build)

source-maps

laravel-5

angular