在前端开发中，我们经常会遇到需要调试打包后的代码的场景，但是有时候我们需要的只是在代码中查找具体的错误位置，而不想看到一堆打包后的代码，这时候我们就需要使用 Sourcemaps 技术。而在 Sourcemaps 技术中，使用 Exorcist-Stream 这个 NPM 包可以帮助我们将 JavaScript 文件中的 Sourcemaps 信息提取出来。
本文将详细介绍如何使用 Exorcist-Stream 包，并提供示例代码以帮助读者深入学习此技术。
Exorcist-Stream 包简介
Exorcist-Stream 是一个 NPM 包，它可以将 JavaScript 文件中的 Sourcemaps 信息提取出来。使用 Exorcist-Stream，我们可以将 Sourcemaps 信息存储到一个单独的文件中，然后进行调试时直接使用 Sourcemaps 文件查找错误位置，避免了对打包后的混淆代码进行耗时操作。
Exorcist-Stream 包是基于 Node.js 运行，所以在使用之前需要先安装 Node.js 环境。安装方式可以参考官网教程：https://nodejs.org/en/download/。
Exorcist-Stream 包的使用
要使用 Exorcist-Stream 包，我们需要先安装它。在命令行中执行以下代码：
npm install exorcist-stream -D
安装完成后，接下来就是如何使用 Exorcist-Stream 包了。我们需要先创建一个新的 Readable Stream，然后将此 Stream 与 Exorcist-Stream 包的实例相连，如下代码：
-- -------------------- ---- ------- ----- -------- - --------------------------- ----- -- - -------------- ----- --------------- - ------------------------------------------- ----- -- - ---------- ------- ---------------- -------- --------------- --- -- ---- ---- ----- ------ -- -- ------------------------
上述代码中，我们首先引入 Exorcist-Stream 包和 Node.js 的文件操作模块 fs，然后创建了一个 Streams 写入对象 sourceMapStream，用于存储 Sourcemaps 信息。
接着我们使用 Exorcist-Stream 包的构造函数 exorcist 创建了一个 Exorcist-Stream 实例，传入了参数 mapUrl 和 mapFile，用于设置以及存储 Sourcemaps 文件的路径。
最后我们将我们的 Readable Stream 通过 pipe 方法与 Exorcist-Stream 相关联，这样就可以在处理过程中将 Sourcemaps 信息存储到指定的路径中了。
Exorcist-Stream 包的示例代码
为了更好的理解 Exorcist-Stream 包的使用方式，我们以下模拟一个代码打包场景，并提供如下示例代码：
-- -------------------- ---- -------
----- -------- - ---------------------------
----- -- - --------------
----- ---- - ----------------
----- ---------- - ----------------------
----- ------ - -------------------------------
-- -------------
----- ----- - -------------------- -------------------
----- ------ - -------------------- --------
-- -----
----- -------------- - --------------------------
---------------------------
-- -- ---------- ------
----- --------------- - -------------------------------------- ------------------
-- -- ---------- --
----- -- - ----------
------- ----------------
-------- ---------------
---
-- ----------
----- -------------- - -------------------------------------- --------------
-- -- ---------------
---------------------------------------------以上代码中，我们定义了一个入口文件和一个输出文件路径，起到了打包的作用。
我们首先使用 browserify 对入口文件进行打包，并使用 vinyl-source-stream 将其转换为流数据。接着我们使用 Exorcist-Stream 包提供的实例 exorcist 创建了一个 Stream，将其中的 Sourcemaps 文件存储到指定位置。最后，我们将这个 Readable Stream 通过 pipe 方法连接到 Exorcist-Stream 中并最终落地到指定的输出流 writableStream 中。
总结
本文详细介绍了 Exorcist-Stream 包的使用方式，并提供了示例代码进行说明。随着前端开发的不断发展，Sourcemaps 技术在打包调试中的应用越来越广泛，希望读者通过本文的学习可以更好的掌握这项技术，提高代码调试效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/99737