Babel V7 学习总结

babel工作流

输入字符串 -> @babel/parser parser -> AST -> transformer[s] -> AST -> @babel/generator -> 输出字符串

AST

抽象语法树（abstract syntax tree或者缩写为AST)，或者语法树（syntax tree)，是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。和抽象语法树相对的是具体语法树（concrete syntaxtree)，通常称作分析树（parse tree）。
一般的，在源代码的翻译和编译过程中，语法分析器创建出分析树。一旦AST被创建出来，在后续的处理过程中，比如语义分析阶段，会添加一些信息。

@babel/core

@babel/core包括了整个babel的工作流，是babel的核心包，其中包含了一系列工作流中需要使用到的Toolings。e.g. @babel/parser、@babel/generator等

@babel/cli

@babel/cli是babel提供的内建的命令行工具，主要是提供babel这个命令来对js文件进行编译。
@babel/cli推荐安装在locally project中，有两个理由：

• Different projects on the same machine can depend on different versions of Babel allowing you to update them individually.
• Not having an implicit dependency on the environment you are working in makes your project far more portable and easier to setup.

这两个包是最基础的包，所以我们一般会npm install --save-dev @babel/core @babel/cli来进行安装，安装之前项目目录下最好存在package.json，这样可以ensure proper interaction with the npx command.

这两个包装完之后，就可以开始使用babel了。

但是!!!

由于Babel 6 做了大量模块化的工作，将原来集成一体的各种编译功能分离出去，独立成插件。这意味着，默认情况下，当下版本的 babel 不会编译代码。
所以我们还需要使用一堆配合前两者，真正发挥作用的插件(@babel/plugin-transform-xxx)，比如@babel/plugin-transform-arrow-functions，这个插件就可以转换箭头函数了，但是如果在一个使用es6语法进行开发的项目中，不可能只使用零星几个插件，那么代码中大量使用插件将会是一个噩梦，所以babel提供了一个叫做preset的概念，说白了就是插件包，将很多常见的plugins放了进去，我们可以通过使用preset来省下一个一个去挑选插件放入配置文件中的时间。
最常使用的就是这一个了，@babel/preset-env。

@babel/preset-env

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller! By default @babel/preset-env will use browserslist config sources unless either the targets or ignoreBrowserslistConfig options are set.

Browserslist

browserslist是在不同的前端工具之间共用目标浏览器和 node 版本的配置工具。
browserslist可以在babel之中配置，来告诉babel具体转化代码的规则
有三种方式去配置：

• 在.babelrc或者babel.config.js中去配置