在前端开发过程中，我们经常需要调试 JavaScript 的代码。然而，当代码被打包成一个文件后，调试变得非常困难。这时，source maps 技术就出现了。
source maps 是一种映射技术，它能够将打包后的代码映射回源代码，从而方便我们调试。在本文中，我们将介绍如何使用 npm 包 rails-assets-source-maps，来实现在 Rails 应用中使用 source maps。
安装和配置
首先，我们需要在 Rails 应用中添加 rails-assets-source-maps 依赖。在 Gemfile 中添加：
------ ---------------------- --- --------------------------- --- ------
然后，运行 bundle 安装新的 Gem：
- ------ -------
之后，我们需要在 application.js 和 application.css 文件中启用 source maps。在 application.js 中添加：
--- ------- ------------------------
在 application.css 中添加：
------- ---------------------------
最后，我们还需要为 Rails 配置 source maps。在 config/application.rb 中添加：
----------------------- -- ----- ------------------------ ------------------ ------------------------- ---------------------------------------------- ---
到此，我们的安装和配置工作就完成了。接下来，我们将演示如何使用 rails-assets-source-maps。
使用示例
我们需要一个简单的 Rails 应用，和一个包含单个 JavaScript 文件的 Rails Engine。如图所示：
--- ---
- --- ------
- --- -----------
- --- --------------
--- -------
--- ---------
--- ---
--- ------
--- -----------
--- ------------application.js 包含如下代码：
--- ------- ------ --- ------- ---------- --- ------- ---------- --- ------------ - --- ------- ---------
my_engine.js 包含如下代码：
---------- -- - ------------------- -- --------- ---
我们需要使用 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