写了调试代码怕带上生产？用这个babel插件让你轻松放心写调试代码

github.com/szYuan/babe…

开发的时候都会遇到需要写调试代码的时候，比如为了调试一块代码，需要暂时把它前置的判断开关打开。或者为了加快自测的效率，会提前把需要填写的表单内容在代码里提前配置好。

例如：

function onBtnClick() {
    let valid = validate(formData)
    // DEBUG 跳过验证直接往下走流程
    valid = true
    if(valid) {
    // DEBUG mock表单内的数据
        formData = {
            name: '杰尼鲑',
            age: 6,
            phone: 13222222222
        };
        submit(formData);
    }
}
 

但是编写这种调试代码在提高我们代码自测效率的同事，随之也带来很多麻烦。比如代码在git提交前要把调试代码一个个删除或者注释掉，需要特别仔细检查，生怕漏删错删。而且调试代码被带上生产环境也是最常见的生产bug之一。

对于开发时对调试代码的高频使用，清理调试代码时的繁琐，以及可能影响程序稳定性的矛盾，我想到用编译时插件来解决。

最初也是最简单的思路就是通过注释标记，在开发环境允许调试代码的存在和运行，开发环境之外，例如测试环境和生产环境，则在打包时自动将调试代码删去。

这种方式简单易懂，但是有个很大的隐患，可能存在各种原因，插件没有把你预期里应该删掉的代码删掉。比如注释标签可能写错了，或者可能注释标签闭合有误，或者插件配置有误导致没有转换成功。有很多种可能性，可能导致结果不符合你的预期，导致代码格式错乱，甚至影响生产打包结果。

因此我想找到一个新的解决方案，稳定优先。使用方式越简单，出错机会越少，甚至即使插件执行错误或者遇到异常，也不能影响代码的正常执行。

我最后想到比较好的方案就是使用一个箭头函数，配合注释，将调试代码包裹起来。这样，在异常场景下，即使代码不通过插件的转化或插件执行出错，调试代码本身默认就是不会执行的。

而在正常使用的情况下，如果在开发环境，这个被箭头函数包裹的调试代码在编译后会被转换成自执行函数（IIFE），而在其他环境下打包则将这个包裹着调试代码的函数移除。由于调试代码被函数包了起来，babel对代码的处理更加简单，不需要对注释进行起止位置的判断，插件处理出错可能性更低，即使存在未知异常导致调试函数没有被编译，调试代码也不会被执行。

后面和同事讨论过后，他提了个建议说最好能加强一下代码的语义性，让没用过这个插件的协同开发者可以快速知道这些函数代码存在的意义。除了尽量在使用时加上注释以外，最好能不止支持箭头函数，如果支持具名函数包裹的话，还能在函数名上增加语义化的内容。

于是我对插件做了一些调整，可以支持箭头函数和具名函数，只需要在函数前一行增加flag注释:`@IIFE-for-debug`。另外提供几个配置参数，包括支持对flag的自定义，配置是否启用插件，以及配置函数转自执行的时机。

{   
    targetFlag: '@IIFE-for-debug',
    enableCondition: () => true,
    transformCondition: () => process.env.NODE_ENV==='development'
}
 

具体使用方式

安装：

npm install --save-dev babel-plugin-transform-iife-for-debug
 

配置：

// .babelrc
{
    "plugins": [
        ["transform-iife-for-debug"]
        // with options:
        // ["transform-iife-for-debug", {"targetFlag": "@IIFE-for-debug", ...}]
    ]
}
 

更多详情可以看github~ github.com/szYuan/babe…