[前端小小白的学习之路]--Bable实现由ES6转译为ES5

标签：tps   规则   .json   ons   自动   target   一个   []   转译   

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

举例说明：

转译前（ES6格式）代码如下：

let User = {
name : ‘张三‘,
age : 22
};

let { name, age } = User;
console.log( name, age );

转译后（ES5格式）代码如下：

‘use strict‘;

var User = {
    name: ‘张三‘,
    age: 22
};

var name = User.name,
    age = User.age;

console.log(name, age);

如上用Babel转译为ES5格式后就可以在现有的javascript环境下运行了。　

babel安装与项目部署步骤如下：

1.新建一个babel_test文件夹，并在此文件夹里面新建src和dist两个文件夹。

2.在babel_test目录下初始化项目，生成 package.json文件。

npm init -y

2.安装bable（全局安装&本地安装）　

　全局安装

npm install -g babel-cli

　本地安装

npm install --save-dev babel-preset-es2015 babel-cli（建议安装在当前目录下）

4.在babel_test目录下新建 .babelrc文件，该文件用来设置转码规则和插件，基本格式如下。(Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel必须要配置这个文件。)

    {
        "presets": [
            "es2015"
        ],
        "plugins": []
    }

5.在src文件夹下面新建代码格式为ES6的文件1.js。（文件代码如本文前面ES6格式的代码）　　

6.在cmd项目目录下运行 babel src/1.js -o dist/2.js ，babel会将ES6代码自动转译并在dist文件下生成ES5格式的代码文件2.js。（文件代码如本文前面ES5格式的代码）

7.编译成功，直接引用1.js就可以在现有环境下执行了。

[前端小小白的学习之路]--Bable实现由ES6转译为ES5

标签：tps   规则   .json   ons   自动   target   一个   []   转译   

原文地址：http://www.cnblogs.com/luxiaoxing/p/7308700.html