babel

• babel 是一个广泛使用的转码器，可以将 es6 代码转换为 es5 代码，从而在现有的环境下执行

原理

• 大多数 JavaScript Parser 遵循 estree 规范，Babel 最初基于 acorn 项目(轻量级现代 JavaScript 解析器) -

Babel大概分为三大部分：

• 解析：将代码转换成 AST 抽象语法树
  词法分析：将代码(字符串)分割为token流，即语法单元成的数组
  语法分析：分析token流(上面生成的数组)并生成 AST
• 转换：访问 AST 的节点进行变换操作生产新的 AST
  Taro就是利用 babel 完成的小程序语法转换
• 生成：以新的 AST 为基础生成代码

---

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

注：babel-loader 版本最高为7，否则会报错
新版本安装如下：

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

配置文件 .babelrc

该文件用来设置转码规则和插件，格式如下：

// 如果使用新版本 bable-loader 则下面 env 要写成 @babel/preset-env
// react ---> @babel/react
// es2015 ---> 去掉
{
    "presets": [
        "react",
        "es2015",
        "env"
    ],
    "plugins": []
}

presets 字段设置转码规则，安装规则如下：

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015 // 新版本 babel-plugin-transform-runtime plugins 里面 @babel/plugin-transform-runtime

# react转码规则
$ npm install --save-dev babel-preset-react // 新版本 @babel/preset-react

#ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。
$ npm install --save babel-polyfill // 新版本 @babel/polyfill