ECMAScript 6(1)Babel

目录

 

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 文件

ECMAScript 6(1)Babel

文件内容

ECMAScript 6(1)Babel

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 都行

ECMAScript 6(1)Babel

3.  执行命令

yarn build 或者 npm run build

原文件 input

ECMAScript 6(1)Babel

输出文件 output 转译成功 

ECMAScript 6(1)Babel

 

这是文件目录

ECMAScript 6(1)Babel

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