在前端开发过程中，我们常常需要打包 JavaScript 代码，以便在浏览器中运行。常见的打包工具有 webpack、gulp 等。这些工具在执行打包时，一种常见的操作是将多个 JavaScript 文件合并为一个或多个文件。但是，在合并操作中，如果其中某个文件 require 了另一个文件，那么在合并后的文件中这部分依赖关系就会丢失。gobble-derequire 这个 npm 包就是用来解决这个问题的。
gobble-derequire 简介
gobble-derequire 是一个 gobble(一个 JavaScript 构建系统) 插件，它可以将 JavaScript 代码中的 require 语句转化为普通的函数调用和变量定义，从而使合并后的代码不再依赖某个特定的 require 实现。这个过程被称为 derequire。
gobble-derequire 安装
安装 gobble-derequire：
--- ------- ---------------- ----------
gobble-derequire 使用
在配置 gobble 打包任务时，可以使用 gobble-derequire 完成 derequire 操作。
1. 引入 gobble-derequire
----- --------- - ----------------------------
2. 配置 gobble-derequire
----- ---------- - -----------------------
----- ------ - ------------------
----- --------- - ----------------------------
----- --- - ------- ----- --
----- ------- - --------------------
----- ------ - -------
----------- ------------------ -
----------- ----------------------- -
----------- --------- --3. 执行打包任务
使用 gobble 完成打包任务：
------ ----- ------ ----
4. 示例代码
在 JavaScript 代码中使用 gobble-derequire：
--- - - ------------------
------------ -
------------------- ---------
---经过 gobble 打包后，上面的代码会被转换成：
--- - - ------------------
------------ -
------------------- ---------
--------------gobble-derequire 总结
在前端开发过程中，使用 gobble-derequire 可以解决 JavaScript 代码合并后依赖关系丢失的问题。使用 gobble-derequire 操作简单，只需在 gobble 配置中添加 derequire 即可。需要注意，使用 derequire 可能会导致一些代码的行数增加，同时也会增加部分代码的执行时间。这些因素都需要在实际开发中加以考虑。
参考资料
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066e6e255dee6beeee7406