鍓嶈█Babel鏄竴涓€氱敤鐨勫鍔熻兘JavaScript缂栬瘧鍣紝瀹冨厑璁镐竴浜涙柊鐗堟湰鐨勮娉曟垨璇硶绯栧湪浣庣増鏈祻瑙堝櫒涓婅繍琛屻€傚畠鏈変笁涓富瑕佺殑澶勭悊姝ラParse->Transform->Generate銆傞€氳繃鍦═ransform杞崲鏈熼棿灏嗘彃浠讹紙鎴栭璁撅級搴旂敤浜庨厤缃枃浠舵潵鍚敤杞爜銆傜敤AST缂栧啓Babel鎻掍欢闈炲父澶嶆潅锛岄渶瑕佺浉褰撳鐨勫熀纭€鐭ヨ瘑銆傝鎻掍欢涔嬪墠锛屼笉寰椾笉鎻愪竴涓婣ST鐨勬蹇点€侫ST鐨勫叏绉版槸AbstractSyntaxTree銆傝繖妫垫爲瀹氫箟浜嗕唬鐮佺殑缁撴瀯銆傞€氳繃瀵硅繖妫垫爲杩涜澧炲垹鏀规煡鎿嶄綔锛屽彲浠ュ浠ｇ爜杩涜鏇存敼鍜屼紭鍖栵紝鏈€鍚庡湪Generate姝ラ鏋勯€犲嚭杞崲鍚庣殑浠ｇ爜涓层€俛stexplorer鏄竴涓潪甯稿ソ鐢ㄧ殑鍦ㄧ嚎杞崲宸ュ叿锛屽彲浠ュ府鍔╂垜浠洿鐩磋鍦拌瘑鍒獳ST鑺傜偣銆俧unctionsquare(n){returnn*n;}缁忚繃缃戠珯瑙ｆ瀽鍚庯紝寰楀埌{"type":"Program","start":0,"end":38,"body":[{"type":"FunctionDeclaration","start":0,"end":38,"id":{"type":"Identifier","start":9,"end":15,"name":"square"},"琛ㄨ揪寮忊€濓細鍋囷紝鈥滅敓鎴愬櫒鈥濓細鍋囷紝鈥滃紓姝モ€濓細鍋囷紝鈥滃弬鏁扳€濓細[{鈥滅被鍨嬧€濓細鈥滄爣璇嗙鈥濓紝鈥滃紑濮嬧€濓細16锛屸€滅粨鏉熲€濓細17锛屸€滃悕绉扳€濓細鈥渘鈥潁],"body":{"type":"BlockStatement","start":19,"end":38,"body":[{"type":"ReturnStatement","start":23,"end":36,"argument":{"type":"BinaryExpression","start":30,"end":35,"left":{"type":鈥滄爣璇嗙鈥濓紝鈥滃紑濮嬧€濓細30锛屸€滅粨鏉熲€濓細31锛屸€滃悕绉扳€濓細鈥渘鈥潁锛屸€滆繍绠楃鈥濓細鈥?鈥濓紝鈥滃彸鈥濓細{鈥滅被鍨嬧€濓細鈥滄爣璇嗙鈥濓紝鈥滃紑濮嬧€濓細34,"end":35,"name":"n"}}}]}}],"sourceType":"module"}杩欎笉鏄湰鏂囩殑閲嶇偣锛岀啛鎮変竴涓嬫暟鎹粨鏋勫氨鍙互浜嗗湪涓嬮潰鐨勪緥瀛愪腑鐢ㄥ埌璇︾粏瑙ｉ噴绠€浠嬭闂€呰浆鎹㈤樁娈礍babel/traverse浼氶亶鍘嗚闂瘡涓€涓狝ST鑺傜偣锛屼紶閫掔粰鎻掍欢銆傛彃浠舵牴鎹渶瑕侀€夋嫨鎰熷叴瓒ｇ殑鑺傜偣杩涜杞崲鎿嶄綔銆傝繖绉嶈璁℃ā寮忕О涓鸿闂€呮ā寮忥紙visitor锛夈€傝繖鏍峰仛鐨勫ソ澶勬槸锛氶亶鍘嗘搷浣滅粺涓€鎵ц锛岃妭鐐硅浆鎹㈡柟娉曠粺涓€鎵ц銆傛兂璞′竴涓嬶紝Babel鏈夐偅涔堝鎻掍欢銆傚鏋滄瘡涓彃浠惰嚜宸遍亶鍘咥ST锛屽湪涓嶅悓鐨勮妭鐐逛笂杩涜涓嶅悓鐨勬搷浣滐紝缁存姢鑷繁鐨勭姸鎬併€傝繖鏍蜂笉浠呮晥鐜囦綆涓嬶紝鑰屼笖瀹冧滑鐨勯€昏緫鏁ｈ惤鍚勫锛屼娇寰楁暣涓郴缁熼毦浠ョ悊瑙ｅ拰璋冭瘯銆傛垜浠潵鐪嬫渶绠€鍗曠殑鎻掍欢缁撴瀯锛歟xportdefaultfunction({types:t}){return{visitor:{Identifier(path,state){console.log(path,state);},}};};瀹冨湪姣忔杈撳叆鏍囪瘑绗dentifier鏃堕兘浼氭墦鍗板綋鍓嶈矾寰勫拰鐘舵€併€傛敞锛欼dentifier(){}鈫慖dentifier绠€鍐欙細{enter(){}}濡傛灉闇€瑕佽闂畬鏁寸殑鐢熷懡鍛ㄦ湡锛堝寘鎷寮€浜嬩欢锛夛紝浣跨敤濡備笅鍐欐硶锛欼dentifier:{enter(){console.log('杈撳叆锛?);},exit(){console.log('閫€鍑猴紒');@babel/traverse閬嶅巻骞惰礋璐ｆ浛鎹€佺Щ闄ゅ拰娣诲姞AST鑺傜偣銆俻ath琛ㄧず鑺傜偣涔嬮棿鐨勫叧绯伙紝璇﹁path婧愮爜锛?/data{"parent":{...},//鐖惰妭鐐规暟鎹粨鏋?parentPath":null,//鐖惰妭鐐筽ath"node":{...},//鑺傜偣鏁版嵁缁撴瀯"scope":null,//scope...etc}//鏂规硶{"remove",//鍒犻櫎褰撳墠鑺傜偣"replaceWith",//鏇挎崲褰撳墠鑺傜偣銆?.etc}鐘舵€佺敤浜庤闂彃浠朵俊鎭€侀厤缃弬鏁帮紝涔熷彲鐢ㄤ簬鍦ㄦ彃浠跺鐞嗚繃绋嬩腑瀛樺偍鑷畾涔夌姸鎬併€侤babel/types鍖呭惈涓€涓敤浜庢瀯寤恒€侀獙璇佸拰杞崲AST鑺傜偣鐨勬柟娉曞簱銆傛垜浠互涓婇潰鐨剆quare鏂规硶涓轰緥锛岀紪鍐欎竴涓皢n閲嶅懡鍚嶄负x鐨勮闂€呯殑蹇€熷疄鐜帮細enter(path){if(path.node.type==='Identifier'&&path.node.name==='n'){path.node.name='x';}}缁撳悎@babel/types鍙互鏇寸畝娲佸拰璇箟鍖栵細import*astfrom'@babel/types';enter(path){if(t.isIdentifier(path.node,{name:'n'})){璺緞.node.name='x';}}鍙纭畾浜嗚妭鐐圭殑绫诲瀷锛坱ype灞炴€э級锛屾牴鎹被鍨嬫悳绱㈠畼鏂规枃妗ｅ嵆鍙€傜ず渚媌abel-plugin-import鐢ㄨ繃react缁勪欢搴揳nt-design鎴栬€卾ue缁勪欢搴搗ant鐨勪汉涓€瀹氫笉浼氬鎸夐渶瀵煎叆杩欎釜姒傚康涓嶉檶鐢熴€傚叿浣撴蹇垫枃妗ｅ弬瑙乤ntd鎸夐渶鍔犺浇锛屼负浜嗚vant蹇€熶笂鎵嬶紝鎺ㄨ崘浣跨敤鏀寔鑷姩鎸夐渶鍔犺浇鐨勬彃浠禸abel-plugin-import銆傝繖閲岄渶瑕佹敞鎰忕殑鏄紝澶ч儴鍒嗘瀯寤哄伐鍏烽兘鏀寔鍩轰簬TreeShaking鐨凟SM浜у搧鐨勬寜闇€鍔犺浇锛岄偅涔堣繖涓彃浠跺氨娌＄敤浜嗗悧锛熺瓟妗堟槸鍚﹀畾鐨勶細TreeShaking浼氬彈鍒板鏉傜幆澧冿紙姣斿鍓綔鐢級鐨勫奖鍝嶈€屽鑷村け璐ャ€傛瀯寤哄伐鍏锋病鏈塗reeShaking鎴栨病鏈塃SM鐨勭粍浠跺簱銆備骇鍝乧ss闇€瑕佹牴鎹渶瑕佸娆℃墜鍔ㄥ紩鍏ャ€傝瀹屽畠鐨勪笉鍙浛浠ｆ€э紝鎴戜滑鍐嶆潵鐪嬬湅杩欎釜鎻掍欢鍋氫簡浠€涔?/鍦?babelrc涓坊鍔犻厤缃畇tyle":true}]]}import{Button}from'vant';鈫撯啌鈫撯啌鈫撯啌瀵煎叆鈥渧ant/es/button/style鈥濓紱浠庘€渧ant/es/button鈥濆鍏Button锛涘鏋滅Щ闄ゆ彃浠舵晥鏋滀細鎬庢牱锛熶粠'vant'瀵煎叆{Button}锛涒啌鈫撯啌鈫撯啌鈫搗ar_vant=require("vant");varButton=_vant.Button;鍙互鏄庢樉鐪嬪嚭浼氬鍏ユ暣涓粍浠跺簱锛屼弗閲嶅奖鍝嶅寘浣撳ぇ灏忋€傞摵鍨簡杩欎箞澶氾紝涓嬮潰杩涘叆涓婚鍒嗘瀽婧愮爜銆傜煡閬撻鍏堥渶瑕佸仛浠€涔堬紝骞朵粠鏍戜腑鏀堕泦涓€浜涘叧閿叧閿瓧ImportDeclaration銆乻pecifiers.local.name銆乻ource.value銆傚浜庤繖浜涘叧閿妭鐐癸紝寮€濮嬫敹闆嗙姸鎬併€傛簮鐮佸涓嬶細ImportDeclaration(path,state){const{node}=path;//璺緞鍙兘琚墠涓€涓疄渚嬪垹闄ゃ€傚鏋滐紙锛佽妭鐐癸級杩斿洖锛沜onst{value}=node.source;const{libraryName}=杩欎釜锛?/@babel/types宸ュ叿搴揷onst{types}=this;//鍐呴儴缁存姢鐘舵€乧onstpluginState=this.getPluginState(state);if(value===libraryName){node.specifiers.forEach(spec=>{if(types.isImportSpecifier(spec)){pluginState.specified[spec.local.name]=spec.imported.name;}else{pluginState.libraryObjs[spec.local.name]=true;}});pluginState.pathsToRemove.push(璺緞);}}鍒嗘瀽鍙戠幇锛屽仛浜嗕互涓嬪嚑浠朵簨锛氬垽鏂鍏ョ殑鍖呭悕鏄惁涓庡弬鏁發ibraryName鐩稿悓锛岄亶鍘唖pecifiers鍏抽敭瀛楋紝鍒ゆ柇鏄惁涓篒mportSpecifier绫诲瀷锛堣姳鎷彿鏂规硶锛夛紝鍒嗗埆瀛樻斁鍦ㄤ笉鍚岀殑鍐呴儴鐘舵€侊紝灏嗗綋鍓嶈妭鐐瑰瓨鍌ㄥ湪鍐呴儴鐘舵€侊紝鏈€鍚庣粺涓€鍒犻櫎鏀堕泦鍒扮殑鐘舵€侊紝鏈€鍚庢壘鍒版墍鏈夊彲鑳藉紩鐢↖mport鐨勮妭鐐癸紝鍏ㄩ儴澶勭悊銆傜敱浜庨渶瑕佸垽鏂殑鑺傜偣澶锛岃繖閲屼笉鍐嶈禈杩般€傚彲浠ユ煡鐪嬫簮鐮佸涓嬶細constmethods=['ImportDeclaration','CallExpression',//鍑芥暟璋冪敤琛ㄨ揪寮廟eact.createElement(Button)'MemberExpression',//灞炴€ф垚鍛樿〃杈惧紡vant.Button'Property',//瀵硅薄灞炴€у€糲onstobj={btn:Button}'VariableDeclarator',//鍙橀噺澹版槑constbtn=Button'ArrayExpression',//鏁扮粍琛ㄨ揪寮廩Button,Input]'LogicalExpression',//閫昏緫杩愮畻绗﹁〃杈惧紡Button||1'ConditionalExpression',//鏉′欢杩愮畻绗rue?Button:Input'IfStatement','ExpressionStatement',//琛ㄨ揪寮忚鍙odule.export=Button'ReturnStatement','ExportDefaultDeclaration','BinaryExpression',//浜岃繘鍒惰〃杈惧紡Button|1'NewExpression','ClassDeclaration',//绫诲０鏄巆lassbtnextendsButton{}'SwitchStatement','SwitchCase',];somethingobvious鍙互鐞嗚В鐨勬柟娉曞悕灏变笉涓€涓€娉ㄩ噴浜嗐€傞渶瑕佺壒鍒鏄庣殑鏄紝闈炶姳鎷彿鏂规硶鐨勭姸鎬佷細鍦∕emberExpression鏂规硶涓皢vant.Button杞崲涓篲Button锛宨mportvantfrom'vant'锛?/瀵瑰簲浜巔luginState.libraryObjsconstButton=vant.Button;鈫撯啌鈫撯啌鈫撯啌瀵煎叆鈥渧ant/es/button/style鈥濓紱import_Buttonfrom"vant/es/button";constButton=_Button;杩欎簺鏂规硶鏈€缁堥兘浼氳皟鐢╥mportMethod鍑芥暟锛屽畠鎺ュ彈3涓弬鏁帮細methodName鍘熷缁勫悕file褰撳墠鏂囦欢path.hub.filepluginState鍐呴儴鐘舵€佺姸鎬乸luginName.pluginMethod,pluginState.selectedMethods[methodName]){const{style,libraryDirectory}=this;consttransformedMethodName=this.camel2UnderlineComponentName//eslint-disable-line?transCamel(methodName,'_'):this.camel2DashComponentName?transCamel(鏂规硶鍚?'-'):鏂规硶鍚?constpath=winPath(this.customName?this.customName(transformedMethodName,file):join(this.libraryName,libraryDirectory,transformedMethodName,this.fileName),//eslint-disable-line);pluginState.selectedMethods[methodName]=this.transformToDefaultImport//eslint-disable-line?addDefault(file.path,path,{nameHint:methodName}):addNamed(file.path,methodName,path);濡傛灉锛坱his.customStyleName锛墈conststylePath=winPath锛坱his.ccustomStyleName(transformedMethodName,鏂囦欢));addSideEffect(file.path,`${stylePath}`);}elseif(this.styleLibraryDirectory){conststylePath=winPath(join(this.libraryName,this.styleLibraryDirectory,transformedMethodName,this.fileName),);addSideEffect(file.path,`${stylePath}`);}elseif(style===true){addSideEffect(file.path,`${path}/style`);}elseif(style==='css'){addSideEffect(file.path,`${path}/style/css`);}elseif(typeofstyle==='function'){conststylePath=style(path,file);濡傛灉(stylePath){addSideEffect(file.path,stylePath);}}}return{...pluginState.selectedMethods[methodName]};}鏍规嵁鍒嗘瀽锛屽仛浜嗕互涓嬪嚑浠朵簨锛氶€氳繃methodName鍘婚噸锛屼繚璇乮mportMethod鍑芥暟涓嶄細琚娆¤皟鐢紝灏嗙粍浠跺悕methodName杞崲涓烘牴鎹笉鍚岀殑閰嶇疆鐢熸垚瀵煎叆璇彞鍜屽鍏ユ牱寮忋€俠abel瀹樻柟鐨勮緟鍔╁姛鑳藉寘@babel/helper-module-imports鏂规硶addDefault銆乤ddNamed銆乤ddSideEffect锛岃繖閲屼篃浣跨敤浜嗗叿浣撶殑鍔熻兘濡備笅锛歩mport{addDefault}from'@babel/helper-module-imports';//濡傛灉'hintedName'瀛樺湪浜庝綔鐢ㄥ煙涓紝鍚嶇О灏嗘槸'_hintedName2','_hintedName3',...addDefault(path,'source',{nameHint:'hintedName'})鈫撯啌鈫撯啌鈫撯啌import_hintedNamefrom'source'import{addNamed}from'@babel/helper-module-imports';//濡傛灉娌℃湁璁剧疆hintedName锛岃鍑芥暟灏嗙敓鎴愪竴涓猽uid浣滀负hintedName鏈韩锛屼緥濡?_named'addNamed(path,'named'锛?鏉ユ簮'锛?鈫撯啌鈫撯啌鈫撯啌import{namedas_named}from'source'import{addSideEffect}from'@babel/helper-module-imports';addSideEffect(path,'source');鈫撯啌鈫撯啌鈫搃mport'source'鏈€鍚庡仛濂介€€鍑轰簨浠剁殑鍠勫悗宸ヤ綔锛屽垹闄ゆ棫鐨刬mportImportProgramExit(path,state){this.getPluginState(state).pathsToRemove.forEach(p=>!p.removed&&p.remove());}鎬荤粨涓€涓媌abel-import-plugin鐨勬暣涓祦绋嬶細瑙ｆ瀽鎵€鏈塱mport寮曞叆鐨勬爣璇嗙锛屽苟鍦ㄥ唴閮ㄧ紦瀛樺苟鏋氫妇鎵€鏈夊彲鑳戒娇鐢ㄨ繖浜涙爣璇嗙鐨勮妭鐐癸紝鍖归厤缂撳瓨涓殑鏍囪瘑绗﹀鏋滃尮閰嶆垚鍔燂紝浣跨敤杈呭姪鍑芥暟鐢熸垚鏂拌妭鐐癸紝鍒犻櫎鏃ц妭鐐广€傞檮瑷€鍐欒繖绡囨枃绔犵殑鍒濊》鏄洜涓鸿繖涓郴鍒楃殑濮婂绡囷細鍐檞ebpackloader鍜屾彃浠讹紙闄勫疄渚嬶級鍜屽啓markdown-it鎻掍欢鍜岃鍒欍€傚啓瀹屼簡锛堥『渚垮畨鍒╀竴娉煒侊級锛屾€庝箞鑳芥病鏈夌粰鍔涚殑babel鏂囩珷鍛€備粠涓婇潰鐨勪緥瀛愪篃鍙互鐪嬪嚭锛屾瘡涓彃浠堕兘瑕佽€冭檻鍚勭澶嶆潅鎯呭喌鐢熸垚鐨勪笉鍚孉ST鏍戯紝闇€瑕佸ぇ閲忕殑鐭ヨ瘑鍌ㄥ銆備笌涔嬪墠鐨勬枃绔犱笉鍚岀殑鏄紝鎴戝苟娌℃湁鍦ㄩ」鐩腑瀹炶返鑷繁鐨刡abel鎻掍欢瀹炰緥銆傚笇鏈涗互鍚庢湁鏈轰細琛ュ厖銆傚弬鑰冩枃妗abel鎻掍欢鎵嬪唽
