在前端开发过程中，我们经常需要调试 JavaScript 的代码。然而，当代码被打包成一个文件后，调试变得非常困难。这时，source maps 技术就出现了。
source maps 是一种映射技术，它能够将打包后的代码映射回源代码，从而方便我们调试。在本文中，我们将介绍如何使用 npm 包 rails-assets-source-maps，来实现在 Rails 应用中使用 source maps。
安装和配置
首先，我们需要在 Rails 应用中添加 rails-assets-source-maps 依赖。在 Gemfile 中添加：
source "https://rubygems.org" gem "rails-assets-source-maps", "~> 0.5.0"
然后，运行 bundle 安装新的 Gem：
$ bundle install之后，我们需要在 application.js 和 application.css 文件中启用 source maps。在 application.js 中添加：
//= require rails-assets-source-maps在 application.css 中添加：
@import "rails-assets-source-maps";
最后，我们还需要为 Rails 配置 source maps。在 config/application.rb 中添加：
config.assets.configure do |env| env.register_transformer 'text/javascript', 'application/javascript', Rails::SourceMaps::SprocketsSourceMapProcessor end
到此，我们的安装和配置工作就完成了。接下来，我们将演示如何使用 rails-assets-source-maps。
使用示例
我们需要一个简单的 Rails 应用，和一个包含单个 JavaScript 文件的 Rails Engine。如图所示：
-- -------------------- ---- ------- --- --- - --- ------ - --- ----------- - --- -------------- --- ------- --- --------- --- --- --- ------ --- ----------- --- ------------展开代码
application.js 包含如下代码：
//= require jquery //= require jquery_ujs //= require turbolinks //= require_tree . //= require my_engine
my_engine.js 包含如下代码：
$(function () { console.log("Hello, my engine!") });
我们需要使用 source maps 来调试 my_engine.js。
首先，我们需要在浏览器中打开调试工具（例如 Chrome），并在控制台中启用 source maps。
然后，我们访问我们的应用并在控制台中执行如下代码：
-- -------------------- ---- ------- -- -- ------ ---- ------------------------------ -------------------- ---------------------------- -- -- ---- ------ ---- ---------------------------------------- -------------- -- ---------------- ---------- -- - ----- -------- - --- ------------------------ ------------------------------------------ ----- -- ------- -- ---- ---展开代码
上述代码中，我们首先启用了 source maps，并将 source maps 文件的路径配置为 /source-maps/mappings.wasm。然后，我们异步加载了 application.js.map 文件，并使用 SourceMapConsumer 类解析了这个文件。最后，我们使用 originalPositionFor 方法来获取 my_engine.js 中某行代码的源代码位置。
这里有一个小技巧，如果我们想要简化这个过程，可以在控制台中输入：
-- -------------------- ---- ------- -- -- ------ ---- ------------------------------ -------------------- ---------------------------- -- -------------------------------------------------------------------------- -------- -- - ----- -------- - --- -------------------------- ------------------------------------------ ----- -- ------- -- ---- ---展开代码
这样，我们就可以自动获取 my_engine.js 文件的 source maps，并直接使用 SourceMapConsumer 类解析源代码位置了。
总结
在本文中，我们介绍了如何使用 npm 包 rails-assets-source-maps，在 Rails 应用中使用 source maps 技术。我们讨论了安装和配置、使用示例等主题，并提供了详细的代码示例。希望这篇文章能够对您有所帮助，让您在前端开发中更加轻松地调试代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/74148
