Homemade simple plug-babel

Examples

A remove all print tag codes, such as for the production of console.log ( 'mess')

Test.js file to be converted

the console.log ( ' Hello ' ); 
the let A = ' AS ' ;

babel convert files plugin.js

module.exports = function (babel) {

    const { types: t, template } = babel;

    const keyPathVisitor = (node , properties) => {
        let temp = node
        for(let item of properties) {
            if (temp[item])
                temp = temp[item]
            else {
                temp = null
                break
            }
        }
        return temp
    }

    const visitor = {
        //需要访问的节点名
        //Access default path is injected into the two parameters (likened to DOM), State 
        ExpressionStatement (path, State) {
             IF (process.env.NODE_ENV === ' Production ' ) {
               const Node = path.node;
               // casting current access to the internal node, it is determined whether the parsed ast wherein the console 
              const expressionNode = keyPathVisitor (node, [ ' expression the ' ]);
               const isCallExpression = expressionNode.type === ' CallExpression ' ;
               iF (isCallExpression) {
                 const objectName = keyPathVisitor (expressionNode, [ 'the callee ' , ' Object ' , ' name ' ]);
                 const prototypeName = keyPathVisitor (expressionNode, [ ' the callee ' , ' Property ' , ' name ' ]);
                 IF (objectName === ' Console ' && prototypeName === ' log ' ) {
                   // If the above conditions simply remove the node 
                  path.remove ();
                }
              }
            }

        }
    };

    return {
        visitor
    };
};

 

Conversion:

Use babel-cli manual conversion, installation npm i babel-cli -D

1, specify the converted file npx babel --plugins ./plugin.js test.js.

Successful conversion

2, a conversion .babelrc configuration.

{
   " Plugins " : [
     " ./pluginLog "  // location of the file conversion babel 
  ] 
}

E:\workspace\babel\test>npx babel test.js

let a = 'as';

 

Written at the end:

Babel so-called plug-in is used to convert the code. Source code into the source code. Specifically, it is to transform the environment (such as a browser) does not recognize the code into code that can be supported.

As ES2015 (es6 converted into es5), babel-plugin-compoment (demand-loading it hungry components).

Any code can be converted in accordance with the form we want (even if not recognized converted into toxic ha ha). The key is to convert the operation ast.

You need to first be converted to parse out the source code of its ast structure, and then operate for ast (is a big project).

Ast parsed structure: https://astexplorer.net/

操作ast：https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md#toc-visiting

Reference links:

https://segmentfault.com/a/1190000013921832

https://www.cnblogs.com/chyingp/p/how-to-write-a-babel-plugin.html

Location of project;

https://github.com/18946168254/babel-test.git