Babel使用

1、Babel

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

2.3.1、配置环境

安装babel命令行工具：

npm install --global babel-cli

安装成功后可以使用babel -V查看版本，可以使用babel -help 查看帮助

创建项目，在当前项目中依赖babel-core

假定当前项目的目录为：E:\Desktop-temp\xww\FastResponse\Mobile\Hybird\vue2_01\vue07_03_babel

使用npm init可以初始化当前项目为node项目

npm install babel-core --save

依赖插件babel-preset-es2015

如果想使用es6语法，必须安装一个插件

npm install babel-preset-es2015

然后在文件夹下面创建一个叫.babelrc的文件，并写入如下代码：

{
"presets": ["es2015"]
}

windows不支持直接命令为.babelrc，可以在DOS下使用@echo结合>实现：

.babelrc文件以rc结尾的文件通常代表运行时自动加载的文件，配置等等的，类似bashrc,zshrc。同样babelrc在这里也是有同样的作用的，而且在babel6中，这个文件必不可少。
在babel6中，预设了6种，分别是：es2015、stage-0、stage-1、stage-2、stage-3、react

2.3.2、转换ES6为ES5

当环境准备好了，就可以编写一个es6风格的文件如：es6.js，内容如下：

let add=(x,y)=>x+y;
const n1=100,n2=200;
var result=add(n1,n2);
console.log(result);

在当前目录执行命令：

babel es6.js -o es5.js

转换后的结果es5.js：

"use strict";

var add = function add(x, y) {
  return x + y;
};
var n1 = 100,
    n2 = 200;
var result = add(n1, n2);
console.log(result);

从转换后的结果可以看出es6已变成es5了，箭头函数不见了。 

2.3.3、使用babel-node运行ES6模块化代码

babel-cli工具自带一个babel-node命令，提供一个支持ES6的REPL环境。它支持Node的REPL（交互式解释器环境）环境的所有功能，而且可以直接运行ES6代码。

在当前目录下创建lib.js文件：

/**
 *定义模块
 */
//导出
export let msg="求和：";
export function sum(n){
    let total=0;
    for(var i=1;i<=n;i++){
        total+=i;
    }
    return total;
}

创建main.js文件调用定义好的模块：

/**
 * 使用模块
 */
//导入
import { sum, msg } from './lib.js';
let result = sum(100);
console.log(msg + "" + result);

在命令行执行：babel-node main.js 结果如下：

到这里共讲解了3种可以运行ES6模块化的环境，任选一种可以用于学习。