作为前端开发者，我们总会遇到需要修改 JavaScript 模块的需求，很多时候我们会使用类似 babel 在编译阶段进行转换。但是有些情况下，我们需要在运行时动态修改模块代码，这时候就需要使用一个 npm 包 module-rewriter 来做到这一点。
module-rewriter 简介
module-rewriter 是一个用来重写 JavaScript 模块的工具，可以用来禁用导出、修改导入、修改函数体等。它可以运行在 Node.js 环境下，也可以在浏览器中使用。
安装
你可以使用 npm 安装 module-rewriter：
npm install module-rewriter --save-dev
使用
module-rewriter 提供了一个核心函数 rewrite，它接受一个参数，该参数是个对象，用来描述重写规则。
我们来看一个示例，假设有如下一段代码：
// foo.js export function add(x, y) { return x + y; }
现在我们想通过 module-rewriter 来禁用该模块的导出，可以像下面这样使用 module-rewriter：
-- -------------------- ---- ------- ----- - ------- - - --------------------------- ----- -- - -------------- ----- -------- - ----------- ----- ---- - ------------------------- --------- ----- --------- - --------- ------- ----- ------ ------------ - -------- --------------- ---------------- -- -- - -- ---- ------------------------- ------ ----------- -- --- -----------------------展开代码
在上述代码中，我们首先通过 fs 模块读取了 foo.js 文件并获取其中的代码，之后我们调用 rewrite 函数来对这段代码进行重写。
我们传入了 source 属性作为源代码，apply 属性是一个回调函数，接受两个参数：第一个参数为解析后的语句列表，第二个参数是一个对象，用来描述模块信息，其中包括 sources、sourceFileName 和 importedBindings 等属性。
在该回调函数中，我们清除了 importedBindings（导出变量绑定），从而成功禁用了模块的导出。
高级用法
除了禁用模块导出之外，我们还可以使用 module-rewriter 对模块进行各种复杂的修改。
修改导入
我们可以通过修改 sources 属性来修改模块的导入列表。下面我们以修改 import * as math from 'math'; 为例：
-- -------------------- ---- ------- ----- - ------- - - --------------------------- ----- -- - -------------- ----- -------- - ----------- ----- ---- - ------------------------- --------- ----- --------- - --------- ------- ----- ------ ------------ - -------- --------------- ---------------- -- -- - --- ------ ------ ------- -- -------- - -- ------- --- ------- - ----------------- ---------- - - ------ ----------- -- --- -----------------------展开代码
另外，我们还可以通过修改 importedBindings 和 exportedBindings 来修改模块的导入导出变量。
修改函数体
我们可以通过遍历语句列表，找到我们想要修改的语句，从而对函数体进行修改。下面我们以修改函数 add 的返回值为例：
-- -------------------- ---- ------- ----- - ------- - - --------------------------- ----- -- - -------------- ----- -------- - ----------- ----- ---- - ------------------------- --------- ----- --------- - --------- ------- ----- ------ ------------ - -------- --------------- ---------------- -- -- - --- ------ --------- -- ----------- - -- --------------- --- ------------------------- - ----- ----------- - -------------------------------------- -- -------------------- --- ------ - ----------------------------------------------- - ---- ------------------------------------------------ - ---- - - - ------ ----------- -- --- -----------------------展开代码
在上述代码中，我们遍历了语句列表，找到了导出的函数体，然后对其返回值进行了修改。
总结
module-rewriter 帮助我们在运行时动态修改 JavaScript 模块，可以非常方便地修改导出、导入、函数体等，为我们开发带来了极大的便利。同时，它的 API 也非常易用，是不可多得的优秀 npm 包。
如果你想更深入了解 module-rewriter 的具体 API 可以参考官方文档：https://github.com/rollup/plugins/tree/master/packages/module-rewriter。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef2907b8c4ce90ee4ca3b53
