babel
TIP
学会bable
简介
TIP
Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：
- 语法转换
- 通过 Polyfill 方式在目标环境中添加缺失的特性
- 源码转换（codemods）
js
// Babel 输入： ES2015 箭头函数
[1, 2, 3].map(n => n + 1);
// Babel 输出： ES5 语法实现的同等功能
[1, 2, 3].map(function(n) {
return n + 1;
});开始
TIP
新建babel-project-01文件夹, 然后执行npm init --yes生成项目package.json。 新建babel.config.js, 内容如下：
js
// babel.config.js
module.exports = {
presets: ["@babel/env"],
plugins: []
};TIP
安装Babel官方依赖:
- @babel/cli(是Babel命令行转码工具，使用命令行进行Babel转码(npx babel *))
- @babel/core(@babel/cli依赖@babel/core，这个是babel的核心库，本质上就是一个解析器，这个库提供了很多api，可以将普通js解析成ast语法树)
- @babel/preset-env(提供了ES6转换ES5的语法转换规则, 不使用的话，也可以完成转码，但转码后的代码仍然是ES6的，相当于没有转码。)
bash
yarn add @babel/cli @babel/core @babel/preset-env --dev::: tips 新建index.js文件, 内容如下： :::
js
// Babel 输入： ES2015 箭头函数
[1, 2, 3].map((n) => n + 1);执行npx babel index.js, 得到以下输出：
bash
$ npx babel index.js
"use strict";
// Babel 输入： ES2015 箭头函数
[1, 2, 3].map(function (n) {
return n + 1;
});常用命令行操作
npx babel index.js没有任何参数的，会编译指定文件并输出到控制台;npx babel index.js -o ./dist/index.js将babel的输出内容输出到指定的一个文件里。（-o是--out-file的简写）npx babel src_dir -d dest_dir当 js 文件很多时，就需要直接转码整个文件夹。（-d是--out-dir的简写）
babel 本质
TIP
把这个转译代码分为三步：
- parser：code=>ast
- transform：ast=>修改过的ast
- generate：修改过的ast=>编译后的code
TIP
第一步对应@babel/parser，第二步对应@babel/traverse，第三步对应@babel/generator。