ECMAScript 6（1）Babel

亦凉 2021-09-19 12:48 243阅读 0赞

**目录**

1.  Babel

2.  使用步骤

--------------------

## **1.  Babel** ##

> 1. 简单来说，就是可以把ES6的代码转换成ES5的代码，这样你就可以在ES5的环境中运行ES6而不必担心兼容性了；  
> 2. ES7的转换也可以靠这个来完成；  
> 3. 其是放置在node\_modules文件夹下的插件，就像使用其他通过npm install安装的插件一样使用；  
> 4. 默认只转换语法，不转换API。比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

## 2.  使用步骤 ##

**1.  配置 .babelrc 文件**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70][]

**文件内容**

![20190521155207561.png][]

> 1. 在项目的根目录下创建一个文件，文件名是.babelrc，记得放在项目根目录（一般是和package.json还有readme.md同一个目录下）；  
> 2. 注意1：上面那个文件，在windows下不能直接创建（会提示说必须输入文件名），    
>    解决方法1：用linux、mac或者用IDE（比如webstorm）来创建；  
>    解决方法2：从我的github中直接下载文件  
> 3. 注意2：那个文件的babelrc就是后缀名，而不是txt格式的（所以会提示没有文件名）；  
> 4. 用编译器打开（或者用记事本打开也行，注意编码格式是UTF8），文件内基本格式如下：
> 
>     \{  
>       "presets": \[\],  
>       "plugins": \[\]  
>     \}
> 
> 5. 这个文件用于设置转码规则和插件；  
> 6. presets是转码规则，值的数组里面，填写规则;  
> 7. plugins是插件，有需要就写，不需要的话这个可以省略;  
> 8. 按需安装转码规则（见下面）；  
> 9. 将对应的字符串添加到.babelrc中;  
> 10. 运行转码命令/内嵌到package.json里在项目运行时转码；

**2.  安装依赖**

**npm , cnpm , yarn 都行**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 1][]

**3.  执行命令**

**yarn build 或者 npm run build**

**原文件 input**

![20190521155515963.png][]

**输出文件 output 转译成功 **

![20190521155604684.png][]

**这是文件目录**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 2][]

> ps :  也可全局安装 babel
> 
> 1.  单文件转换
> 
> 终端命令 : **babel input.js -o output.js** 
> 
> 同目录下自动生成output.js，文件内容是上面的转换结果  -o表示--out-file，即输出为文件
> 
> 2.  文件夹转换
> 
> 终端命令 :** babel input -d output**   (将一个目录下的所有文件（递归执行）全部转码输出到某个文件夹下（同名转换）)
> 
> \-d表示--out-dir，即输出到文件夹，前面的input表示输入文件夹名，后面的output表示的是输出的文件夹名；  
>  输出：output目录被创建，里面有input文件夹下的同名input.js，但内容是转换后的  
>  input文件下所有文件都会被转换，转换过程是递归的（即子文件夹下的子文件，甚至更深层也会被转换）；  
>  
> 
> 一般情况下不推荐全局

参考文献 :  [阮一峰 ES6 ][ES6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70]: /images/20210726/56d17c9d8dbd45a7ac35673b43be86b5.png
[20190521155207561.png]: /images/20210726/fac21288a7514adb85f1f3477105b44b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 1]: /images/20210726/bbf827b3cd3041ef9453f3c6382a710c.png
[20190521155515963.png]: /images/20210726/a47ea6129b3048b3a1f5c7fd3bec91a4.png
[20190521155604684.png]: /images/20210726/932a68c6b8c84eeea39b7b76dd4798d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 2]: /images/20210726/84009fe9976b4994a124f878dac8c036.png
[ES6]: http://es6.ruanyifeng.com/#docs/intro