我们在前面已经安装和学习过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. Android 获取渠道名称

    直接看代码, //获取渠道名称public static String getChannelName(Activity ctx) { if (ctx == null) { return null; } ...

  2. CSS3 笔记五(Buttons)

    Some examples 1> Input width animation Search: Code <!DOCTYPE html> <html> <head&g ...

  3. Don't make a promise when you are in Joy. Don't reply when you are Sad.Don't take decisions when you are Angry.Think Twice.Act Wise.

    Don't make a promise when you are in Joy. Don't reply when you are Sad.Don't take decisions when you ...

  4. js错误

    1ajax提交 从数据库里取文件typeerror: 'stepup' called on an object that does not implement interface HTMLInputE ...

  5. C# DllImport“调用导致堆栈不对称。原因可能是托管的 PInvoke 签名与非托管的目标签名不匹配。请检查 PInvoke 签名的调用约定和参数与非托管的目标签名是否匹配 ”

    调用外部dll时,出现如下问题 C# DllImport“调用导致堆栈不对称.原因可能是托管的 PInvoke 签名与非托管的目标签名不匹配.请检查 PInvoke 签名的调用约定和参数与非托管的目标 ...

  6. Thinkphp学习回顾(一)之基本结构目录

    TP框架的学习一般都是从了解框架的基本结构开始的,每个文件都有其专属的作用,我的TP框架的回顾也从基本结构开始讲起. 一.ThinkPHP的获取 http://www.thinkphp.cn   这是 ...

  7. jQuery的deferred对象学习

    #copy { background-color: lightgreen; padding: 15px; margin: 10px } 一.deferred对象简介 deferred对象是jquery ...

  8. mysql 批量导出建表语句 (视图,函数同理)

    import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream;import ja ...

  9. android Menu

    menu <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="h ...

  10. 理解#define offsetof(struct_t,member) ((int)&((struct_t *)0)->member)

    #define offsetof(struct_t,member) ((int)&((struct_t *)0)->member) 这个东西很多人应该知道: offsetof是用来判断结 ...