使源映射引用远程计算机上的原始文件

Make source maps refer to original files on remote machine

本文关键字：原始 文件 计算机 映射 引用      更新时间：2023-09-26

使用Google闭包编译器缩小一堆java脚本。现在，我还想将源映射添加到那些要在野外调试的映射中。

问题是，我想把原始文件（最好还有地图文件）放在一个完全不同的地方，就像另一个服务器一样。我一直在寻找解决方案，并发现了sourceRoot参数。但它似乎没有得到支持？

还发现了这个--source_map_location_mapping参数，但没有任何文档。似乎它想要一个管道分隔的参数（filesystem-path|webserver-path）。为此尝试了几种不同的方法，如local filename|remote url，但没有成功。这只给了我No such file or directory和java.lang.ArrayIndexOutOfBoundsException。

是否有人成功地将缩小/映射的源文件放置在远程计算机上？

或者有人知道--source_map_location_mapping的任何文档吗？

幸运的是，谷歌闭包编译器的源代码可以公开

https://gist.github.com/lydonchandra/b97b38e3ff56ba8e0ba5

REM --source_map_location_mapping is case SENSITIVE !
REM need extra escaped double quote   --source_map_location_mapping="'"C:/tools/closure/^|httpsa://bla/'"" as per http://stackoverflow.com/a/29542669
java -jar compiler.jar --compilation_level=SIMPLE_OPTIMIZATIONS --create_source_map=C:'tools'closure'latest'maplayer.js.map --output_wrapper "%output%//# sourceMappingURL=maplayer.js.map"  --js=C:'tools'closure'mapslayer.js --js_output_file=maplayer.min.js --source_map_location_mapping="'"C:/tools/closure/^|httpsa://bla/'""

标志的格式应该如下：

--source_map_location_mapping=foo/|http://bar

如果您需要多个位置，则应重复该标志：

--source_map_location_mapping=foo/|http://bar --source_map_location_mapping=xxx/|http://yyy

但我预计您会遇到的是，"|"可能会被命令shell解释。例如：

echo --source_map_location_mapping=foo/|http://bar
-bash: http://bar: No such file or directory

（选择使用"|"是不幸的）。确保它被适当地逃脱。类似：

--source_map_location_mapping="foo/|http://bar"

我提交了一个拉取请求，以报告格式错误的标志值的错误：

https://github.com/google/closure-compiler/pull/620

这至少会让你知道你的标志值是不正确的（所以你不会看到越界的异常）。

John在功能方面是正确的，但我认为我可以稍微澄清一下（因为这对我来说非常困惑）。

我怀疑很多人和我有同样的问题：

  1. 源地图url是相对于当前目录生成的

  2. 它们不一定与你的网站/服务器上的相对URL匹配

  3. 即使它们确实直接匹配，这里发现的定义奇怪的伪规范意味着Chrome/FFirefox将尝试加载相对于源地图的路径。即浏览器加载/assets/sourcemaps/main.map，查看assets/js/main.js，并加载/assels/sourcemap/assets/js-main.js（yay）。（或者它可能是相对于原始的js文件，实际上，我只是碰巧把它们放在同一个目录中）。

让我们使用上面的例子。假设我们的源映射中有assets/js/main.js，并希望确保加载mywebsite.com/assets/json/main.js

--source_map_location_mapping="assets|/assets"

正如John提到的，引号很重要，对于多个选项，要多次重复arg。带前缀的/会让Firefox/Chrome知道你想要的是相对于你的网站根目录的。（如果你用类似于咕哝关闭工具的东西来做这件事，你需要逃离更多：

config:{
    source_map_location_mapping:"'"assets|/assets'"",
}

通过这种方式，我们基本上可以将任何给定的源地图路径映射到任何给定的网站路径。它并不是某种闭包源根的完美替代品，但它确实允许您将源的每个部分单独映射到它们自己的根，所以这并不是一个糟糕的折衷方案，并且确实提供了一些额外的灵活性（即，您可以为某些资产指定一些cdn路径，但不能为其他资产指定）。

您可能会发现另一件有用的事情，您可以通过output_wapper自动添加sourceMappingURL。（不过，如果你想在生产中进行调试，你可能更喜欢让服务器返回X-Sourcemap:blah.js.map头，而公众无法访问）

--output_wrapper="(function(){%output%}).call(this); //# sourceMappingURL=/assets/js/my_main_file.js.map"
相关文章：