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

官网http://babeljs.io/

安装ec2015的转化器,因为ec2015语法并不是所有浏览器都兼容

$ npm install --save-dev babel-preset-es2015
1
1

然后项目文件夹下多了 

然后新建一个 .babelrc 文件,写入:

{
presets: ['es2015']
}

好,下面来学一个简单的es2015的写法 
let,用于代替es5中的var 
我们先写一下

let name = "zhangsan";
alert(name);

我们来利用babel转化一下,命令行执行:

babel ./es2015/index.js --out-file ./es2015/index-build.js

index-build.js就是转换后的js:

"use strict";

var name = "zhangsan";
alert(name);
 
 

利用Babel来转化你的ES2015脚本初步的更多相关文章

  1. 利用 Babel 玩转你的代码

    我在团队帮助开发 Node 工具时,遇到了需要对多份相似的代码进行一定的处理,但又不能改变原本仓库的代码,这个非常像我们的编译工具做的事情.在一开始的时候,参考了类似 FIS 的功能,简单参照使用代码 ...

  2. (喷血分享)利用.NET生成数据库表的创建脚本,类似SqlServer编写表的CREATE语句

    (喷血分享)利用.NET生成数据库表的创建脚本,类似SqlServer编写表的CREATE语句 在我们RDIFramework.NET代码生成器中,有这样一个应用,就是通过数据库表自动生成表的CREA ...

  3. 利用.NET生成数据库表的创建脚本,类似SqlServer编写表的CREATE语句

    利用.NET生成数据库表的创建脚本,类似SqlServer编写表的CREATE语句 (喷血分享)利用.NET生成数据库表的创建脚本,类似SqlServer编写表的CREATE语句 在我们RDIFram ...

  4. 利用系统函数模拟实现nginx 系统脚本启动的特殊颜色专业效果

    利用系统函数模拟实现nginx 系统脚本启动的特殊颜色专业效果/etc/init.d/nginxd {start/stop/restart/reload}利用if语句实现: ============= ...

  5. MySQL利用binlog恢复误操作数据(python脚本)

    在人工手动进行一些数据库写操作的时候(比方说数据订正),尤其是一些不可控的批量更新或删除,通常都建议备份后操作.不过不怕万一,就怕一万,有备无患总是好的.在线上或者测试环境误操作导致数据被删除或者更新 ...

  6. Shel脚本-初步入门之《06》

    Shel脚本-初步入门-06 Shell 脚本的建立和执行 6.Shell 脚本的建立和执行 6.1 Shell脚本的建立 在 Linux 系统中,Shell 脚本(bash Shell 程序)通常是 ...

  7. Shel脚本-初步入门之《01》

    Shel脚本-初步入门-什么是 Shell 1.什么是 Shell Shell 是一个命令解释器,它的作用是解释执行用户输入的命令及程序等.Shell 存在于操作系统的最外层,负责与用户直接对话,把用 ...

  8. Shel脚本-初步入门之《02》

    Shel脚本-初步入门-什么是 Shell 脚本 2.什么是 Shell脚本 当命令或程序语句不在命令行下执行,而是通过一个程序文件来执行时,改程序就被称为 Shell 脚本.如果在 Shell 脚本 ...

  9. Shel脚本-初步入门之《03》

    Shel脚本-初步入门-Shell 脚本在 Linux 运维工作中的地位 3.Shell 脚本在 Linux 运维工作中的地位 Shell 脚本语言很适合用于处理纯文本类型的数据,而 Linux 系统 ...

随机推荐

  1. 读取Devexpress内部的图标

    1.图标在Dev源码的存储路径: Sources D.x.u 15.1.3\DevExpress.Images\Images   2.引用DevExpress.Images.v15.1.dll文件,代 ...

  2. Jquery remove 高级用法

    Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...

  3. 剑指offer——树的子结构 (JAVA代码)

    版权声明:本文为博主原创文章,未经博主允许不得转载. 题目描述: 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构). 解题思路: 首先看牛客网给出的测试用例: ...

  4. python :添加的内容具有之前的功能用delegate绑定事件

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. Android setVisibility()

    android view setVisibility(): 有三个参数:Parameters:visibility One of VISIBLE, INVISIBLE, or GONE,想对应的三个常 ...

  6. oracle杀用户建用户改密码脚本

    # ******************************** # * dba_oracle_awr.sh # ******************************** # Usage: ...

  7. dynamic与匿名对象

    用dynamic接收匿名对象很方便,因为不需要去定义model了,但是也有一个弊端,就是匿名对象的作用范围是internal的,也就是只能存在于当前程序域,所以用dynimic跨程序域去接收一个匿名对 ...

  8. laravel框架总结(九) -- 软删除

    当模型被软删除时,它们并不会真的从数据库中被移除.而是会在模型上设置一个 deleted_at 属性并将其添加到数据库.如果对应模型被软删除,则deleted_at字段的值为删除时间,否则该值为空. ...

  9. Android多媒体--MediaCodec 中文API文档

    *由于工作需要,需要利用MediaCodec实现Playback及Transcode等功能,故在学习过程中翻译了Google官方的MediaCodec API文档,由于作者水平限制,文中难免有错误和不 ...

  10. ABAP代码编辑器设置--界线

    ABAP编辑器每行允许的最大字符数: Utilities->Settings打开选项卡: 勾选:Downward-Compat.line Length(72) 设置后看到的效果: 设置步骤: