参考:http://www.ruanyifeng.com/blog/2016/01/babel.html

Babel

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

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
  return item + 1;
});

配置文件


配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件

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

presets字段  设定转码规则,官方提供以下的规则集,你可以根据需要安装
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
  {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

babel-register


babel-register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel进行转码

  $ npm install --save-dev babel-register

使用时,必须首先加载babel-register

  require("babel-register");

  require("./index.js");

然后,就不需要手动对index.js转码了。

需要注意的是,babel-register只会对require命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用

babel-core


如果某些代码需要调用Babel的API进行转码,就要使用babel-core模块。

安装命令 :  $ npm install babel-core --save ,  然后,在项目中就可以调用babel-core。

var babel = require('babel-core');

// 字符串转码
babel.transform('code();', options);
// => { code, map, ast }

// 文件转码(异步)
babel.transformFile('filename.js', options, function(err, result) {
result; // => { code, map, ast }
});

// 文件转码(同步)
babel.transformFileSync('filename.js', options);
// => { code, map, ast }

// Babel AST转码
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

配置对象options,可以参看官方文档http://babeljs.io/docs/usage/options/

下面是一个例子。
  var es6Code = 'let x = n => n + 1';
  var es5Code = require('babel-core').transform(es6Code, {
    presets: ['es2015']
  })
上面代码中,transform方法的第一个参数是一个字符串,表示需要转换的ES6代码,第二个参数是转换的配置对象。

babel-polyfill


Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

解决方案:使用babel-polyfill,为当前环境提供一个垫片

$ npm install --save babel-polyfill

在脚本头部,加入如下一行代码:

import 'babel-polyfill';
// 或者
require('babel-polyfill');

(开发)bable - es6转码的更多相关文章

  1. WEB前端开发学习:源码canvas 雪

    WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> ...

  2. C#微信公众号开发-高级接口-之模板消息开发,附源码

    个人觉得模板消息功能的增加对公众号的作用非常大,可以说是真正意义上的实现了所谓的轻app,商家可以通过模板消息给用户发送重要的信息,交易.预约.消费.邮件.物流等信息.之前我做过的系统通过邮件发送订单 ...

  3. Android开发 QRCode二维码开发第三方框架

    前言 Android开发里二维码开发经常用到,这里简单的介绍下Android开发里的二维码. 最广泛使用的二维码库zxing zxing是最广泛的二维码库各个平台都可以适用它,但是Android平台使 ...

  4. Android | 教你如何开发扫二维码功能

    前言   最近要做一个停车场扫码收费的app,在网上搜了一圈,首先接触到了ZXing,上手试了下,集成过程不复杂,但是感觉效果欠佳,比如距离稍微远点儿就扫不出来了,另外角度对的不好,反光或者光线比较暗 ...

  5. es6转码器-babel

    babel 基本使用 安装转码规则 # ES2015转码规则 $ npm install --save-dev babel-preset-es2015 # react转码规则 $ npm instal ...

  6. es6转码和package.json中的配置

    在线实时转换 需要babel-register .babelrc中: { "presets": [ "es2015" ] } 项目中main.js配置: 前提是 ...

  7. tornado高效开发必备之源码详解

    前言:本博文重在tornado源码剖析,相信读者读完此文能够更加深入的了解tornado的运行机制,从而更加高效的使用tornado框架. 本文参考武sir博客地址:http://www.cnblog ...

  8. 移动web app开发必备 - Deferred 源码分析

    姊妹篇  移动web app开发必备 - 异步队列 Deferred 在分析Deferred之前我觉得还是有必要把老套的设计模式给搬出来,便于理解源码! 观察者模式 观察者模式( 又叫发布者-订阅者模 ...

  9. 微信开放平台开发——网页微信扫码登录(OAuth2.0)

    1.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供 ...

随机推荐

  1. iOS自定义相机

    1.首先声明以下对象 #import <AVFoundation/AVFoundation.h> //捕获设备,通常是前置摄像头,后置摄像头,麦克风(音频输入) @property (no ...

  2. [比赛|考试]nowcoder NOIP提高组组第二场

    160/300pts,rank16(100,30,30) 在自身找毛病,首先做题感觉还不不够认真,比如T3那个我一开始审出来了,然后tmd忘了...gg...T1AC没啥好赞美的,T2T3暴力没拿全啊 ...

  3. shell操作数组

    #!/bin/bash nums=( ) echo ${#nums[*]} #向数组中添加元素 nums[]="http://c.biancheng.net/shell/" ech ...

  4. 页面加载完成前的loading加载效果

    /*loading.js*/ // 加载HTML图 var _LoadingHtml = '<div id="loadingDiv" style="position ...

  5. 毕业设计 python opencv实现车牌识别 形状定位

    主要代码参考https://blog.csdn.net/wzh191920/article/details/79589506 GitHub:https://github.com/yinghualuow ...

  6. 测试用例逐步演进-xmind2excel(Python版)测试用例逐步演进-xmind2excel(Python版)

    最近,我在做项目的时候,经常被问到一个问题:如何做测试评审会更有效呢? 只要做过测试用例评审,特别是比较复杂的测试用例评审的时候,很多测试同学都会苦恼于如何能更有效的向大家说出自己的测试设计思路. 当 ...

  7. thinkphp模板布局

    不知道我们会不会有这样一个困惑,,每当进行一个项目时,发现页面都有好多重复的地方,假如我们每个页面都写,不仅降低的代码的运行效率 而且还不利于后期维护!TP中的模板布局就解决了这一难题! 我们就以Ad ...

  8. CSP-201604-2-俄罗斯方块

    试题编号: 201604-2 试题名称: 俄罗斯方块 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 俄罗斯方块是俄罗斯人阿列克谢·帕基特诺夫发明的一款休闲游戏. 游戏在一个1 ...

  9. java多线程(二)

    线程的阻塞状态: 参考java多线程(一)多线程的生命周期图解,多线程的五种状态.     1.1 join(),如果在A线程体里面执行了B线程的join()方法,那么A线程阻塞,直到B线程生命周期结 ...

  10. DexClassLoader和PathClassLoader

    Android的ClassLoader体系 在Android中可以跟java一样实现动态加载jar,但是Android使用Dalvik VM,不能直接加载java打包jar的byte code,需要通 ...