babel 轉換箭頭函數

轉換前：

const sum = (a,b)=>a+b

 

 

轉化后：

// "use strict";

// var fn = function fn(a, b) {

// return a + b;

// };

 

 

 

 

 

 

實現：

從圖片的對比我們可以看出最大的不同是在 init 時，函數的不同

init

Es6 : ArrowFunctionExpression

Es5: FunctionExpression

 

 

所以我們可以利用一個插件轉化

 

let t = require('@babel/types');

 

 

具體：

const babel = require('@babel/core');
let   code = `let  fn = (a,b) => a + b`;
let   t = require('@babel/types');
//1.init   
//    Es6 : ArrowFunctionExpression  
//    Es5:  FunctionExpression
/// t.functionExpression(id, params, body, generator, async) 
// id: Identifier (default: null)
// params: Array<LVal> (required)
// body: BlockStatement (required)
// generator: boolean (default: false)
// async: boolean (default: false)
// returnType: TypeAnnotation | TSTypeAnnotation | Noop (default: null)
// typeParameters: TypeParameterDeclaration | TSTypeParameterDeclaration | Noop (default: null)



//2. body 
//  
//  ES5   BlockStatement
//  Es6   ExpressionStatement
let transformArrowFunctions = {
    visitor: {
        ArrowFunctionExpression: (path, state) => {
            // console.log(path.node)
            // console.log(path.parent.id)
            let node = path.node;
            let id = path.parent.id;
            let params = node.params;
            let body=t.blockStatement([
                t.returnStatement(node.body)
            ]);
            //將ArrowFunctionExpression  轉化為  FunctionExpression ，傳入不要的參數
            let functionExpression = t.functionExpression(id,params,body,false,false);
            path.replaceWith(functionExpression);
        }
    }
}
const result = babel.transform(code, {
    plugins: [transformArrowFunctions]
});
console.log(result.code);

// let fn = function fn(a, b) {
//     return a + b;
//   };
  

輸出：

let fn = function fn(a, b) {
  return a + b;
};

AST樹可視化工具的網站：  https://astexplorer.net/