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怎么用？

javascript">// 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插件