高级前端-Babel

Babel是什么？是个编译器，把高版本js代码变成低版本js代码

编译过程，把原代码通过词法分析变成一个个token，举例：a+b则拆成了a,+,b三个token

语法分析器把这些token根据对应的语法生成抽象语法🌲

语义分析器根据目标语法生成新的AST

最后生成目标代码，遍历新的AST，生成目标代码

Babel的工作步骤

为什么要用Babel?

js编译器，

• 作用1： 把高版本js代码编译成js低版本代码
• 作用2： polyfill，转译新的API,例如Set, Map, promise等
• 作用3：源码修改

Babel怎么用？

  

   

    

     

    
    

     

      // babel.config.js
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      const IS_PROD = [
      'production', 
      'prod'].includes(process.env.NODE_ENV)
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      const plugins = []
     
    
   

    

     

    
    

     

      if (IS_PROD) {
     
    
   

    

     

    
    

     

        plugins.push(
      'transform-remove-console')
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      module.exports = {
     
    
   

    

     

    
    

     
  
      presets: [
     
    
   

    

     

    
    

     
    
      '@vue/cli-plugin-babel/preset'
     
    
   

    

     

    
    

     

        ],
     
    
   

    

     

    
    

     

        plugins
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      // presets在plugin之后执行，plugin从前往后执行，presets内的顺序是从后往前
     
    
  

presets：babel的插件集合

preset.env: 根据我们配置的环境，babel自动决定用哪些插件

UseBuiltIns在Vue项目配置中默认使用usage

vue项目的package.json中的

   

    

     

      

     
     

      

       "browserslist": [
      
     
    

     

      

     
     

      
    
       "> 1%",
      
     
    

     

      

     
     

      
    
       "last 2 versions",
      
     
    

     

      

     
     

      
    
       "not ie <= 10"
      
     
    

     

      

     
     

      

         ]
      
     
   

这块代码，会被 @babel/preset-env用来决定使用哪些插件，对应上文中的target

常见面试题：

1. Babel的原理

2. 实现一个Babel插件