学习途径

官网：Babel

掘金手册：《babel插件通关秘籍》

作用

转译esnext、typescript、flow到目标环境支持的js

2.一些特定用途的代码转换，比如函数插桩（埋点），自动国际化

一些工具

linter

分析AST的结构，对代码规范进行检查

api文档生成工具

提取源码中的注释，然后生成文档

type checker

根据从AST中提取或者推导的类型信息，对AST进行类型是否一致的检查，从而减少运行时因类型导致的错误

压缩混淆工具

分析代码结构，进行删除死代码、变量名混淆、常量折叠灯各种编译优化，生成体积更小、性能更优的代码

js解释器

除了对AST进行各种信息的提取和检查以外，还可以直接解释执行AST

编译流程

1.parse: 通过parse把源码转成抽象语法树AST

2.transform：遍历AST，通过transform插件对AST进行增删改

3.generate: 把转换后的AST打印成目标代码，并生成sorcemap

parse

parse过程又分为词法分析和语法分析两个步骤

1.词法分析

将一个源码，分成一个个不能再分的单词（token）

2.语法分析

把token进行递归的组装，生成AST

transform

递归遍历AST，遍历过程中遇到不同的AST节点会调用注册的响应的visitor函数，visitor函数会对AST节点进行增删改，返回新的AST

generator

转换好的AST，递归遍历打印成目标字符串，并生成sorcemap

视频教程

1.使用Babel翻译ES6语法

1.安装依赖

babel-loader
@babel/core
@babel/preset-env (babel-loader本身不认识不知道如何转译es6语法的，因此需要安装@babel/preset-env)

2.webpack.config.js文件中配置

rules:[
    test: /\/js$/,
    excude: /node_modules/
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env']
        }
    }
]

3.使用polyfill来补充ES6代码的实现

安装 @babel/polyfill

问题：inport '@babel/polyfill'导致包体积过大

解决方案：修改webpack配置，按需导入

rules:[
    test: /\/js$/,
    excude: /node_modules/
    use: {
        loader: 'babel-loader',
        options: {
            presets: [
                ['@babel/preset-env', {
                    useBuiltIns: 'usage'
                }]
            ]
        }
    }
]
```js

babel初学习