高级前端-Babel

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

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

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

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

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

高级前端-Babel_第1张图片

Babel的工作步骤

高级前端-Babel_第2张图片

为什么要用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自动决定用哪些插件

高级前端-Babel_第3张图片

高级前端-Babel_第4张图片

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

vue项目的package.json中的

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ]

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

 

常见面试题:

1. Babel的原理

2. 实现一个Babel插件

你可能感兴趣的:(高级前端,js,javascript,Vue,高级前端)