JavaScript 的 source map

网上看到个网站,JavaScript 动效应用得挺不错,就想学习一下,把相关资源下载到本地尝试。从 Chrome/Firefox 浏览器里看到的引用到的相关资源文件也都放到了本地的对应目录下,在调试的时候惊讶地发现,对 js 文件的修改竟然不管用。

看来看去,才注意到一个名为 release_build.js 的文件,以及其伴生的一个 .map 文件。好奇之下搜索了资料,明白了前者是部署时使用了打包工具生成的多合一文件,而且不止简单地文件合并,还有代码混淆。而后者则是可以使前述过程得以逆转的“元信息库”。这一技术叫 Source Map,对这一技术有所讲述的中文资料是阮一峰的文章。该文已经是七年的老文,其中提到的 sourceRoot 键没有看到,但却多了 sourcesContent 键,看上去是未混淆时的源代码。

是否可以使用.map 文件还原原本的文件组织结构呢?一开始找到一个叫 restore-source-tree 的工具,用 npm 安装后测试,完全无法工作。后来找到了名为 reverse-sourcemap 的工具,同样使用 npm 安装,一试就灵,开心。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注