简介
metro-source-map 是一个 JavaScript 库，用于在 Metro bundler 中生成 source map。它可以帮助开发者方便地调试和排查代码的问题。在本文中，我们将学习如何使用这个库来生成 source map。
安装
首先需要安装 metro-source-map。你可以通过以下命令来安装它：
npm install metro-source-map --save-dev
用法
1. 配置 Metro
在使用 metro-source-map 之前，你需要确保已经配置好了 Metro bundler。如果你还没有安装 Metro bundler，请通过以下命令来安装：
npm install -g metro
接下来，你需要在 Metro 配置文件中添加以下内容：
-- -------------------- ---- -------
----- - ---------------- - - ------------------------------
-------------- - ------ -- -- -
----- -
--------- - ---------- --
- - ----- ----------------------------
------ -
------------ -
-------------------- ----- -- -- --
---------- -
-------------------------- ------
--------------- ------
--
---
--------------------- -------------------------------------------------
--
--------- -
----------- --------------- -------
--
--
-----这里使用了 @expo/metro-config 来获取默认的 Metro 配置，并将其与 metro-source-map 配置合并。
2. 生成 source map
执行以下命令来启动 Metro bundler：
metro start
Metro 将会读取配置文件并启动服务。在代码中添加如下注释即可生成 source map：
function add(a, b) {
// # sourceMappingURL=add.js.map
return a + b;
}这里的 add.js.map 是 source map 文件名，你可以自定义它。
3. 调试
现在你已经成功地生成了 source map，接下来需要调试代码。在 Chrome 浏览器中打开开发者工具，选择 Sources 标签页，找到对应的代码文件。右键点击代码行数左侧的空白区域，选择 Add folder to workspace，将文件夹添加到 Workspace 中。
然后，在 Sources 标签页中打开源文件，并将断点设置在需要调试的代码行。此时，你可以愉快地进行调试了！
总结
metro-source-map 可以方便地帮助开发者生成 source map，提高代码调试和排查问题的效率。通过本文的学习，你已经学会了如何使用这个库来生成 source map，以及如何在 Chrome 中调试代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/52385