1).Babel支持NPM包形式的安装,打开命令行窗口,切换到项目根目录,命令如下

npm install babel-cli

2).安装成功后,在package.json文件里添加如下代码

"scripts":{

"start":"babel test.js  --out-file  test-compiled.js"

}

3).创建一个使用了ES6语法的javascript文件test.js 输入如下代码:

[1,2,3].map(n=>n+1);

4). test.js文件里的代码使用了ES6的箭头函数,需要使用babel解码。打开命令行窗口,输入如下命令:

npm run start

5).编译过后的代码输出到了test-compiled.js 代码如下

[1,2,3].map(n=>n+1);

6).编译后的代码没有变化,babel没有将箭头函数转换成普通函数,babel默认不对任何语法转换,需要事先通过配置文件来指定转码es6语法特性。创建配置文件"。babelrc",代码如下

“plugins”:[

"transform-es2015-arrow-functions"

]

7).安装babel转换插件。打开命令行窗口,输入如下命令:

npm  install babel-plugin-transform-es2015-arrow-functions

注意:配置文件中插件的名字跟安装的NPM包的名字并不相同,配置文件内会省略前缀"babel-plugin"

8).再次使用babel进行转码,打开命令窗口,输入如下命令:

npm run start

打开转码后的文件test-compiled.js 里面包含如下代码:

"use strict"

[1,2,3].map(function(n){return n+1 ;})

箭头函数已经转换成了普通函数,转换后的代码可以直接在浏览器运行。

插件“transform-es2015-arrow-functions”只负责对箭头函数转码,如果需要转码其他的ES6特性,需添加对应的插件到配置文件。babel插件列表可以通过访问页面

http://babeljs.io/docs/plugins查看,里面包含了现有插件以及每个插件的使用方法和转码效果。

使用babel的更多相关文章

  1. babel presets stage-x

    在一些新框架的代码中,常基于es6/7标准来书写代码.鉴于这些标准被没有被浏览器广泛支持,我们一般使用babel来将使用e6/7标准书写的代码降级编译(或者说转译)为浏览器可解析的es4/5代码. 以 ...

  2. ES6转换器之Babel

    ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都 ...

  3. Babel:JavaScript编译器

    一.介绍: Babel是一个Javascript编译器,可以将ES6语法转换成ES5. 这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持.下面是一个例子: //转码前: input. ...

  4. 学习 React(jsx语法) + es2015 + babel + webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

  5. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探

    用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...

  6. Babel下的ES6兼容性与规范

    前端开发 Babel下的ES6兼容性与规范   ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...

  7. 【前端】在Gulp中使用Babel

    Install $ npm install --save-dev gulp-babel babel-preset-es2015 用法1: const gulp = require('gulp'); c ...

  8. 使用 Babel + React + Webpack 搭建 Web 应用

    话不说直接上正题. 环境搭建 Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现 ...

  9. Babel 学习

    一,为了更明白地使用Babel, 先了解Babel 的发展过程. 现在Babel的版本是6, 相对于以前的版本, 它做了重大更新: 1, 模块化:所有的内部组件都变成了单独的包.打开Babel在Git ...

  10. 利用Babel来转化你的ES2015脚本初步

    我们在前面已经安装和学习过babel 安装babel-cli 这是babel解释器的客户端主程序 npm install -g babel-cli 安装”编译”插件(babel的JSX语法转换器) n ...

随机推荐

  1. apply方法和call方法的详解2

    1.apply和call的区别在哪里 2.什么情况下用apply,什么情况下用call 3.apply的其他巧妙用法(一般在什么情况下可以使用apply) 我首先从网上查到关于apply和call的定 ...

  2. Hibernate_Validator学习

    1.   Hibernate Validator介绍 1.1   背景 在任何时候,当你要处理一个应用程序的业务逻辑,数据校验是你必须要考虑和面对的事情.应用程序必须通过某种手段来确保输入进来的数据从 ...

  3. ZT Android的引用计数(强弱指针)技术及一些问题

    Android的引用计数(强弱指针)技术及一些问题 分类: Android 2013-06-07 18:25 844人阅读 评论(4) 收藏 举报 目录(?)[+] Android C++框架层的引用 ...

  4. Vue中$refs的用法

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个 ...

  5. Spring的IoC与AOP的理解

    1.Spring它到底是什么? Spring是一个开源的Java应用程序开发框架,为了解决企业应用开发的复杂性而创建的.   在spring中,它会认为一切Java类都是资源,而资源就是Bean,容纳 ...

  6. 本地缓存和redis

    项目中的传统架构在服务启动时 读取数据库的大部分数据到本地内存,在看到redis的作用时发出疑问,到底有什么样的区别以及怎么选择呢,下面是别人的回答 使用本地缓存快还是使用redis缓存好? Redi ...

  7. JavaScript事件的委派与事件的绑定

    事件的委派 在很多需求中,通常元素是动态创建添加到一个父元素中的,这时候我们点击新增的元素是没有反应的 <script type="text/javascript"> ...

  8. sychronized关键字(多线程)

    sychronized关键字: 1. 作用:利用该关键字来创建内置锁,实现线程同步: 2. 分类:(1)sychronized同步方法:(2)sychronized同步代码块: 3. sychroni ...

  9. 以太网,IP,TCP,UDP数据包分析

    http://www.cnblogs.com/feitian629/archive/2012/11/16/2774065.html 网络层的IP 协议是构成Internet 的基础.IP 协议不保证传 ...

  10. 【[APIO2007]动物园】

    我好\(sb\)啊,把\(>>\)打成\(<<\)结果就写了两节课 那个一个人只能看到五个动物显然很鬼畜 那我们就可以压这一维了 \(dp[i][s]\)表示从第\(i\)个位 ...