Babel 及其工作原理

Posted 2021-02-28 leophen

一、什么是 Babel

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 javascript 语法，以便能够运行在当前和旧版本的浏览器或其它环境中。

// Babel 输入：ES2015 箭头函数
[1,2,3].map((n)=>n+1)

// Babel 输出：ES5 语法实现的同等功能
[1,2,3].map(function(n){
  return n+1
})

 

二、Babel 的工作原理

首先把原始代码转成抽象语法树（Abstract Syntax Tree，AST），然后基于这个 AST 做转换，每个转换被处理成插件的形式，最后把 AST 还原成代码。

 

三、安装

这里使用 Webpack

npm install --save-dev babel-loader @babel/core @babel/preset-env

安装成功后，要在 webpack.config.js 中进行简单的开启 Babel：

module: {
  rules: [
    { test: /.js$/, exclude: /node_modules/, loader: "babel-loader"}
  ]
}

上面的安装只是开启了 Babel，还没选择使用 plugin，接下来是进行 plugin 的配置：

在项目根目录创建 .babelrc 文件，文件内容如下：

{
"presets": ["@babel/preset-env"]
}

（这里使用 presets 而非 plugin 的原因：presets 是 plugin 的集合）