WeStorm配置Babel

WeStorm配置Babel

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码。这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

1. 支持node.js

   假设用户已经安装上node，假设置已经安装好npm(最新的node版本默认安装npm).
   webstorm配置nodeJs,如下图：
   
   配置成功之后，新建一个js文件。通过"Control + Shift + F10" 运行，在控制台就可以看到输入结果。如下图：
   

2. 支持ES6语法

   当你通过webstorm编写ES6语法的代码时。webstorm会提示语法错误。
   
   需要设置webstorm支持当前的JS版本为ECMAJavascript6
   
   设置完成之后再查看代码已经不会报语法错误
   

3. 配置Babel

   经过上面两步的配置webstorm可以编写ES6的代码并且不会再提示语法错误。但是js文件却不能通过Node运行。因为ES6的代码需要通过Babel转成ES5才能执行。

   • 安装Babel-cil

     ##CD到项目根目录，执行命令安装babel-cli
     cnpm install babel-cli
     

   • 配置File Watcher
     webstorm的File Watcher能监听到用户的js文件是否修改，并能自动的把js文件里面的ES6的语法的代码转译成ES5的代码。
     Preferences > Tools > File watchers，点击“+”按钮，选择"Babel",出现如下界面
     
     新建成功之后打勾，选择“OK”

     Program选择Babel安装的路径如我的地址：F:\html5\testtemp\node_modules\.bin\babel.cmd

   • 编写项目配置文件
     在项目根目录下创建.babelrc文件。文件内容如：

     {
       "presets": [					//presets字段设定转码规则
         "es2015"			
       ]
     }
     

     在项目根目录下创建package.json文件。文件内容如：

     {
       "name": "testtemp",			//项目名称
       "version": "1.0.0"			//版本
     }
     

     创建文件成功之后，修改js文件，然后保存。通过"Control + Shift + F10" 运行，在控制台就可以看到输入结果。

4. 可能出现的问题

   如果提示错误：
   Error: Couldn't find preset "es2015" relative to directory "F:\\html5\\xxx"
   提示这个错误的原因是没有安装编码规则集，安装规则集
   cnpm install --save-dev babel-preset-es2015