使源映射引用远程机器上的原始文件答案

【问题标题】：Make source maps refer to original files on remote machine使源映射引用远程机器上的原始文件
【发布时间】：2014-11-01 16:22:55
【问题描述】：

使用 Google Closure Compiler 压缩一堆 javascript。现在我还想为那些在野外调试的源映射添加源映射。

问题是，我想将原始文件（最好还有地图文件）保存在完全不同的地方，比如另一台服务器。我一直在寻找解决方案，并发现了 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 的任何文档吗？

【问题讨论】：

我也有类似的问题，也想换sourceRoot..你最后做了什么？

标签： javascript google-closure-compiler

【解决方案1】：

幸运的是 Google Closure Compiler 的源代码是公开的

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/\""

【讨论】：

【解决方案2】：

标志的格式应该是这样的：

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

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

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

但我希望您遇到的是“|”可能由您的命令外壳解释。例如：

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

这至少会让您知道您的标志值不正确（因此您不会看到越界异常）。

【讨论】：

【解决方案3】：

John 在功能方面是正确的，但我想我可以稍微澄清一下（因为这让我开始工作非常困惑）。

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

源地图网址是相对于您当前目录生成的
它们不一定与您网站/服务器上的相对 url 匹配
即使它们确实直接匹配，奇怪定义的伪规范found here 意味着 Chrome/Firefox 将尝试加载相对于源映射的路径。即浏览器加载/assets/sourcemaps/main.map，看到assets/js/main.js，并加载/assets/sourcemap/assets/js/main.js（耶）。（或者实际上可能是相对于原始的js文件，我只是碰巧将它们放在同一个目录中）。

让我们使用上面的例子。假设我们的 sourcemap 中有 assets/js/main.js，并希望确保加载 mywebsite.com/assets/js/main.js。为此，您需要传递选项：

--source_map_location_mapping="assets|/assets"

就像约翰提到的那样，引号很重要，并且对于多个选项重复 arg 多次。前缀 / 会让 Firefox/Chrome 知道你想要它相对于你的网站根目录。（如果你在 grunt-closure-tools 这样的地方这样做，你需要更多地逃避：

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

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

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

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

【讨论】：