轉(zhuǎn)換前：

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

?

?

轉(zhuǎn)化后：

// "use strict";
// var fn = function fn(a, b) { // return a + b; // };

?

?

?

?

實(shí)現(xiàn)：

從圖片的對(duì)比我們可以看出最大的不同是在 init 時(shí)，函數(shù)的不同

init Es6 : ArrowFunctionExpression Es5: FunctionExpression 所以我們可以利用一個(gè)插件轉(zhuǎn)化 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 轉(zhuǎn)化為 FunctionExpression ，傳入不要的參數(shù)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樹可視化工具的網(wǎng)站：? https://astexplorer.net/??

轉(zhuǎn)載于:https://www.cnblogs.com/guangzhou11/p/11441146.html

總結(jié)

以上是生活随笔為你收集整理的babel 转换箭头函数的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。