Babel是 JavaScript 的编译器。
Babel是一个工具链，主要用于将ECMAScript 2015+代码转换为当前和旧版浏览器或环境中的向后兼容版本的JavaScript。
说白了就是「转换语法，兼容低版本浏览器」
[1,2,3].map((n) => n + 1);转换完成后:[1,2,3].map(function(n){return n+1})
Babel 编译的时候会删除类型注释。比如：Vue 用的是 Flow.js 来进行静态类型检查。在 Vue 源码里，会提示你传入的参数是什么类型。
npm 允许「组织」在发布自己的包前面加@字符，也可以理解成官方标记。
所以，7.0以前 npm 下载的是 babel 前缀 ，7.0以后的版本安装的会是 @babel 前缀 ，不要大惊小怪。
Babel 可以使用四种不同的文件格式来配置，但我用过的是以下两种：babel.config.js 和 .babelrc 文件。vue-cli2.0 的 Babel 配置在 webpack.base.conf.js 里面。
简单说一下我常用的编译包：
@babel/core
【编译核心】核心 API 都在这里面，比如常见的 transform、parse。
@babel/cli
【内置CLI】官方推荐在每个项目的本地安装 babel ，因为同一台机器的不同项目可能依赖于不同版本的 Babel ，本地项目的话可以分别更新。其次就是我们在移植项目的时候更方便。
@babel-polyfill
【转换新API】Babel 默认不转换新的 API ，比如（Symbol、Promise）。
@babel/preset-env
【预设】没有任何配置，此预设将包括支持现代JavaScript（ES2015，ES2016等）的所有插件「官方不建议使用，它不会定位浏览器，默认情况下将转换所有 ECMAScript 2015+ 代码」。
有个执行顺序需要注意一下：
如果是引用插件「plugins」，执行顺序从左到右：
{\\\"plugins\\\":[\\\"transform-decorators-legacy\\\", \\\"transform-class-properties\\\"]}
如果是预设「presets」，执行顺序是相反的「从右到左」：
{\\\"presets\\\": [\\\"es2015\\\", \\\"react\\\", \\\"stage-2\\\"]}
图片来源：
Henry Zhu – Babel.js Logo https://github.com/babel/website/blob/3774ba0fe50796963e8a63389116e07d932bd2e3/website/static/img/babel.svg
资料参考：
https://babeljs.io/docs/en/
原创文章，作者：小道研究，如若转载，请注明出处：https://www.sudun.com/ask/34505.html
