简述
随着前端技术的发展，页面越来越复杂，维护成本也越来越高。而 strangler 这个 npm 包就是为了帮助解决这个问题而被开发出来的。它可以帮助我们在页面逐步迁移时，将旧代码逐渐替换成新代码，达到“绞杀”旧代码的效果（strangler 意为绞杀者）。
安装
strangler 可以直接通过 npm 安装：
npm install strangler --save
使用
初始化
在使用 strangler 之前，我们需要创建一个配置文件，通常命名为 strangler.config.js。该文件应该位于项目的根目录下，并返回一个对象，其中包含两个属性：from 和 to，分别指向旧代码和新代码的入口文件路径。
// strangler.config.js module.exports = { from: './old/main.js', to: './new/main.js', };
API
strangler 提供了以下 API：
strangler.start()
启动 strangler，执行代码绞杀。
strangler.stop()
停止 strangler。
strangler.getStatus()
获取当前 strangler 的状态。
strangler.on(event, handler)
绑定事件处理函数：
beforeStart: 在 strangler 开始执行前触发；start: 在 strangler 开始执行时触发；finish: 在 strangler 完成执行后触发；error: 在 strangler 执行出错时触发。
示例
我们来看一个具体的例子。假设我们有一个旧页面 old.html，其中引用的 JS 文件为 old/main.js，我们需要将其逐步迁移到一个新页面 new.html，其中引用的 JS 文件为 new/main.js。
首先，我们需要在 strangler.config.js 中配置路径：
// strangler.config.js module.exports = { from: './old/main.js', to: './new/main.js', };
然后，在 old.html 中添加如下代码：
-- -------------------- ---- ------- ------- --------------------------------------------------------- -------- ----- --------- - --- ------------ -- -------- --------------------------- -- -- - ---------------------- -- -------------- --- ---------------------- -- -- - ---------------------- -- ------------ --- --------------------- ----- -- - ------------------------ -------- ----- --- -- -- --------- ------------------ ---------展开代码
这样，当我们打开 old.html 时，strangler 就会自动启动，并将 old/main.js 中的代码逐步替换成 new/main.js 中的代码。可以在控制台中观察到相应的日志输出。
注意事项
要使用 strangler，旧代码和新代码必须有一定的结构相似性，否则可能会出现未知的错误。此外，由于 strangler 对代码进行了动态修改，因此也可能会导致一些副作用的出现。因此，在使用 strangler 时，请务必进行充分的测试和验证，以确保代码的质量和稳定性。
总结
strangler 是一个非常实用的 npm 包，它可以帮助我们在前端页面逐步迁移时，将旧代码逐渐替换成新代码，达到“绞杀”旧代码的效果。通过本文的介绍和示例，相信大家已经了解了 strangler 的基本使用方法和注意事项。在实际项目中，我们可以根据需要调整配置文件和事件处理函数，以实现更加灵活和定制化的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbb5eb5cbfe1ea0611964
