Babel使用

 

一、Babel

Babel是一个普遍使用的转码器，能够将ES6代码转为ES5代码，从而在现有环境执行。

2.3.一、配置环境

安装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种，分别是：es201五、stage-0、stage-一、stage-二、stage-三、react

2.3.二、转换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.三、使用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模块化的环境，任选一种能够用于学习。