我们在前面已经安装和学习过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. Could not load type 'System.ServiceModel.Activation.HttpModule' from assembly 'System.ServiceModel, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089'

    Could not load type 'System.ServiceModel.Activation.HttpModule' from assembly 'System.ServiceModel, ...

  2. 读取Devexpress内部的图标

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

  3. jade模板

    jade 模板使用 npm install jade -g      安装到全局 jade index.jade         导出一个 index.html 压缩后的 jade -P index. ...

  4. wx getlocation

    http://www.cnblogs.com/txw1958/p/weixin-web-location.html http://blog.csdn.net/myfmyfmyfmyf/article/ ...

  5. 数据分析 - 开放街道地图(OpenStreetMap)

    数据分析 - 开放街道地图(OpenStreetMap) Reinhard使用OpenStreetMap的开放地图数据作为本次数据分析的数据源,使用Python进行数据清洗,使用MongoDB进行数据 ...

  6. c++中的<<函义

    1.一个是左移运算:x = 4<< 2; 2.输出流运算:cout <<x;//X的值输出流到设备中.

  7. spring功能总结

  8. 笔记汇总.md

    ```javascript 1.js对象,value的值取不到,试着将引入的js文件放到body的后面 $("input[type='time']").change( functi ...

  9. MongoDB由于目标计算机积极拒绝,无法连接

    遇到这个问题的时候,可以通过以下步骤解决: 1.打开Mongo安装包:进入Mongo下的data文件夹下的db文件夹,找到Mongod.lock,删除. 2.在命令行中输入: mongod.exe - ...

  10. angularJS中的Promise对象($q)的深入理解

    原文链接:a better way to learn AngularJS - promises AngularJS通过内置的$q服务提供Promise编程模式.通过将异步函数注册到promise对象, ...