Babel 安装使用及基本原理

Babel

官方定义，Babel 是一个 JavaScript 编译器。用于将现在浏览器未兼容的 JavaScript 语法（如：ES6+、JSX、TypeScript等）编译转换为 ES5 语法，使得浏览器能够正常运行代码

Babel 安装及使用

安装

使用 Babel CLI 工具进行babel编译
进入项目目录，安装 babel-cli 以及想要编译转换的类型代码，babel-preset-env 是可以转换 ES6+ 的代码

npm install --save-dev babel-cli babel-preset-env

接着，创建并配置 .babelrc 文件

{
  "presets": ["env"] // 设置转码规则
}

根据自己项目需求去设置相应的转码规则，如 ES2015，则 install babel-preset-es2015，并设置 .babelrc 文件中 presets 新增’es2015’

使用

在项目目录下，终端执行以下代码

./node_modules/.bin/babel src -d lib

或者在 package.json 中，新增 npm script

  {
    "name": "my-project",
    "version": "1.0.0",
+   "scripts": {
+     "build": "babel src -d lib"
+   },
    "devDependencies": {
      "babel-cli": "^6.0.0"
    }
  }

结合 Webpack 安装使用

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

接着，配置 webpack.config.js

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

然后创建并配置 .babelrc 文件

{
  "presets": ["env"] // 设置转码规则
}

基本原理

Babel 是一款 JavaScript 编译器，基本就是将代码以字符串的形式读取，然后进行转换处理，最后返回新的代码字符串
主要有以下三个步骤：

• 解析，读取代码字符串，然后解析构建抽象语法树
• 转换，将构建好的抽象语法树根据设置的转码规则进行相应的转换
• 输出，根据转码规则变换后的抽象语法树再重新生成代码字符串输出

创建抽象语法树

对代码字符串进行遍历分词，分割出最小的语法单元，如：关键字、标识符、运算符、括号等，将分割出的结果保存在数组中，然后对这个数组中存放的语法单元进行递归遍历，逐渐生成抽象语法树。

转换代码

遍历抽象语法树，然后根据转码规则，判断哪一节点需要转换，则进行转换

重新输出代码字符串

递归遍历抽象语法树，生成代码字符串