Github.com/szYuan/babe…

Development will encounter the need to write debug code, for example, in order to debug a piece of code, it is necessary to temporarily turn on its front judgment switch. Or in order to speed up the efficiency of self-testing, the content of the form to be filled in advance will be configured in the code in advance.

Such as:

Function onBtnClick() {let valid = validate(formData) // DEBUG skip validation and go straight down the flow valid = true if(valid) {// DEBUG mock formData FormData = {name: 'j ', age: 6, phone: 13222222222}; formData = {name:' j ', age: 6, phone: 13222222222}; submit(formData); }}Copy the code

But writing this kind of debugging code to improve the efficiency of our code self-test colleagues, also brought a lot of trouble. For example, before submitting the code to Git, debug code should be deleted or commented out one by one, which needs to be carefully checked for fear of missing deletion. Debugging code being taken into production is also one of the most common production bugs.

For the frequent use of debugging code during development, the tedious cleaning of debugging code, and the contradiction that may affect the stability of the program, I think of using compile-time plug-in to solve.

The initial and simplest idea is to allow debug code to exist and run in the development environment through comments, and automatically remove debug code when packaging outside of the development environment, such as test and production environments.

This approach is straightforward, but there is a big catch. For a variety of reasons, plug-ins don’t delete code that you expect to delete. For example, the comment tag might have been written incorrectly, or the comment tag might have been closed incorrectly, or the plug-in might have been configured incorrectly so that the conversion did not succeed. There are a number of possibilities that can lead to results that don’t match your expectations, cause code formatting to go wrong, or even affect production packaging results.

So I want to find a new solution, stability first. The simpler it is, the fewer errors there are, and even if the plug-in executes an error or encounters an exception, it does not affect the proper execution of the code.

The best solution I came up with was to use an arrow function, with comments, wrapped around the debug code. Thus, in an exception scenario, the debug code itself will not execute by default, even if the code does not pass the plug-in’s transformation or the plug-in execution fails.

In normal use, the debug code wrapped in the arrow function is converted to a self-executing function (IIFE) when compiled in the development environment, while packaging in other environments removes the function wrapped in the debug code. Because the debug code is wrapped in the function, Babel makes it easier to process the code. There is no need to start or end comments, plug-in processing is less likely to go wrong, and the debug code will not be executed even if the debug function is not compiled because of an unknown exception.

After a later discussion with colleagues, he suggested that the semantics of the code should be enhanced so that co-developers who have not used the plug-in can quickly see why the function code exists. In addition to using comments whenever possible, it is a good idea to support not only arrow functions, but also to add semantic content to function names if named function wraps are supported.

So I made some changes to the plugin to support arrow functions and named functions by adding flag ‘@iife -for-debug’ on the first line of the function. Several additional configuration parameters are provided, including support for the customization of Flag, whether to enable plug-ins, and the timing of the configuration function to execute itself.

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

Specific use mode

Installation:

npm install --save-dev babel-plugin-transform-iife-for-debug
Copy the code

Configuration:

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

More details can be found at github~ github.com/szYuan/babe…