一.简介：
babel官 ：https://www.babeljs.cn/
githup：https://github.com/babel/babel
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
我这里只是介绍基本的使用方法，详细的可以到官 查看。
1.1基本实现的效果：
1.2 整个设置过程：
运行以下命令以安装软件包：
（这些命令是通过的，哪些不满足请自己安装）
.babelrc 文件（根目录下），vue项目开发使用的配置如下：
.babelrc 文件（根目录下），React项目开发使用的配置如下：
上面的浏览器列表只是一个任意示例。您需要进行调整以适合您要支持的浏览器。
1.3 babel7
@ 符 是什么是 babel 7 的一大调整，原来的 babel-xx 包统一迁移到babel 域下 – 域由 @ 符 来标识，一来便于区别官方与非官方的包，二来避免可能的包命名冲突。
二.配置文件.babelrc
主要是对预设（）和插件（）进行配置，基本格式：
2.1babel转译器
不同的转译器作用不同的配置项，大致可分为以下三种：
2.1.2 语法转义器
主要对最新的语法糖进行编译，并不负责转译新增的和全局对象。例如就可以被编译，而/等并不能被编译。常用到的转译器包有，、、、、等。在实际开发中可以只选用babel-preset-env来代替余下的，但是还需要配上javascirpt的制作规范一起使用，同时也是官方推荐
2.1.2 补丁转义器
主要负责转译新增的和全局对象，例如这个插件能够编译,同时也可以引入进一步对这类用法保证在浏览器的兼容性。 会被编译成以下代码：
2.1.3 jsx和flow插件
这类转译器用来转译JSX语法和移除类型声明的，使用Rect的时候你将用到它，转译器名称为
2.2预设（Presets）
2.2.1官方针对常用环境编写了一些 preset
@babel/preset-env
@babel/preset-flow
@babel/preset-react
@babel/preset-typescript
2.2.2 Stage-X （实验性质的 Presets）
从 Babel v7 开始，所有针对处于标准提案阶段的功能所编写的预设（stage preset）都已被弃用。
stage-x preset 中的任何语法转换都是对语言本身的更改，而这些更改尚未被纳入 JavaScript 标准（例如 ES6/ES2015）
- Stage 0 – 设想（Strawman）：只是一个想法，可能有 Babel插件。
- Stage 1 – 建议（Proposal）：这是值得跟进的。
- Stage 2 – 草案（Draft）：初始规范。
- Stage 3 – 候选（Candidate）：完成规范并在浏览器上初步实现。
- Stage 4 – 完成（Finished）：将添加到下一个年度版本发布中。
处于 stage-3 之前的任何提案，请务必谨慎使用
2.2.3Preset 的路径
如果 preset 在 npm 上，你可以输入 preset 的名称，babel 将检查是否已经将其安装到 node_modules 目录下了
你还可以指定指向 preset 的绝对或相对路径。
2.2.4 Preset 的短名称
如果 preset 名称的前缀为 babel-preset-，你还可以使用它的短名称：
2.2.5 Preset 的排列顺序
Preset 是逆序排列的（从后往前）。
将按如下顺序执行： c、b 然后是 a。
这主要是为了确保向后兼容，由于大多数用户将 “es2015” 放在 “stage-0” 之前。
2.2.6 Preset 的参数
插件和 preset 都可以接受参数，参数由插件名和参数对象组成一个数组，可以在配置文件中设置。
如果不指定参数，下面这几种形式都是一样的：
要指定参数，请传递一个以参数名作为键（key）的对象。
2.3 插件（plugins）
官方文档
Babel 是一个编译器（输入源码 => 输出编译后的代码）。就像其他编译器一样，编译过程分为三个阶段：解析、转换和打印输出。
除了一个一个的添加插件，你还可以以 preset 的形式启用一组插件。
2.4 插件和预设选项
官方文档
官方推荐使用babel-preset-env来替代一些插件包的安装（es2015-arrow-functions，es2015-block-scoped-functions等等），并且有如下几种配置信息,介绍几个常用的
2.4.1 targets
.babelrc
targets可以制定兼容浏览器版本，如果设置了browsers，那么就会覆盖targets原本对浏览器的限制配置。
targets.node对node某一个版本进行编译
modules通常都会设置为false，因为默认都是支持CommonJS规范
2.4.2 ignore
主要作用就是可以指定不编译哪些代码
.babelrc
2.4.2 minified
主要设置编译后是否是压缩，boolean类型，如果使用babel-cli进行打包编译文件这个配置项能够起到作用，但是目前大部分还是会依赖第三方打包工具，例如webpack，所以这个配置参数一般不用设置，webpack插件中的UglifyJsPlugin做了压缩的工作。
2.4.2 comments
在生成的文件中，不产生注释，boolean类型，webpack插件中的UglifyJsPlugin也同样集成了这个功能。
2.4.3 env
官
.babelrc
3. 常用的
babel7
3.1 @babel-core
babel代码的核心
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！