Babel 及其工作原理

FEvivi 2020-04-17

一、什么是 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 的工作原理

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 的集合)

相关推荐