babel的安装与使用

 前边我们介绍的es6的新特性都是通过在html文件的script标签里面写入es6代码，然后再浏览器中打开html文件来完成的，使用的是chrome浏览器，但是这样就有一个问题，如果我没有Chrome浏览器呢？另外，更严重的是，我并不能担保每一个打开我网页的人使用的都是chrome浏览器吧，更何况即便是chrome浏览器也不是全部支持es6的特性呀，因此要想让你的es6代码正确的运行在网页里面，我们需要把写好的代码转换为es5，完成这个转换工作的工具就是babel。

        这就是说，你现在就可以随意编写ES6 程序，而不用担心现有环境是否支持。

babel的安装

 切换到你项目的根目录，我这里是F:\Program\workspaces\node\proedu，通过npm init创建项目的标识“身份证”package.json,再执行命令安装babel：

npm install --save-dev babel-cli

 完成之后package.json自动更新说明安装成功了：

  

注意，我这里没有把babel安装在全局路径下，因为如果我安装在全局路径下，那么就意味着我的项目要运行，全局路径必须要有babel，这样就对环境产生了依赖，当然，安装在全局路径下并没有错误。

设定babel的转码规则

babel不仅可以把es6转为浏览器可以正常运行的es5，还可以转换react的jsx语法为浏览器识别的js，还可以转码es7等，每种转换需要不同的转码规则，这些规则仍然需要我们通过npm来进行安装。

babel的es2015(es6)转换规则:babel-preset-es2015

babel的react转码规则包：babel-preset-react

现在我们需要转码es6，自然就需要安装babel-preset-es2015，执行命令：

npm install --save-dev babel-preset-es2015

编写babel的配置文件

        在项目根路径F:\Program\workspaces\node\proedu下面新建名为“.babelrc”的配置文件，注意这个文件是以“.”开头的啊，前边没字，不是我写错了。

内容为：

{
    "presets":["es2015"]
}

即通过presets来制定多个转码规则，因为我们只用到es2015,所以这里只写一个。

友情提示：如果你直接创建.babelrc的时候，windows环境会提示你“请输入文件名”，你可以使用notepad++或者其他ide创建。

使用npm运行babel

babel在项目根目录下面安装成功了，也配置了它的.babelrc文件，怎么使用呢？它的语法格式是：

babel   demo.js  [--out-file dist/demo_compiled.js]

demo.js是使用es6编写的要被babel转码的js文件

--out-file：用于指定转化后的js文件所在位置，如果不加，就输出到控制台上。

demo.js:

let [a,b,c]=[1,2,3];
console.log(a);
console.log(b);
console.log(c);

执行吧：

因为我并没有在全局安装babel，所以找不到呀，你当前目录下也没有呀，这怎么办呢，可以使用npm来执行，配置package.json,增加"compile_es6":"babel demo.js --out-file dist/demo_compiled.js"：

再运行命令：npm run compile_es6即可（需要你先建好dist文件夹，当然dist文件夹名称并不是固定的，你可以随便起，也可以放到你想放的路径下，只是这个路径要存在）：

F:\Program\workspaces\node\proedu>npm run compile_es6

> proedu@1.0.0 compile_es6 F:\Program\workspaces\node\proedu
> babel demo.js --out-file dist/demo_compiled.js

打开demo_compiled.js，如下：

至此，使用babel转码es6已经完成了，我们在网页中只需要引入demo_compiled.js就可以了。

到这里，已经看似很完美了，但是，babel的使用还存在问题，请继续参考“es6新特性之import和export的介绍并引出babel的问题”。