Babel 入门教程

1. 安装es-checker
npm -g install es-checker
2. 执行es-checker
es-checker
3. 安装一个全局的babel-cli工具,用于命令行转码。
npm -g install babel-cli
$ npm install --global babel-cli
4. 在工作根目录创建一个名字为.babelrc的文件,用来设置转码规则和插件

{
    "presets": [ //设定转码规则
        "es2015",
        "react",
        "stage-2"
    ],
    "plugins": []
}

5. 工作目录下安装需要的转码规则

$ npm install --save-dev babel-preset-es2015     # ES2015转码规则
$ npm install --save-dev babel-preset-react      # react转码规则
$ npm install --save-dev babel-preset-stage-0    # ES7各阶段语法提案的转码规则
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

6. 测试,写一个含有ES6语法的test.js

$ babel-node test.js                       # 转码并执行
$ babel example.js                         # 转码结果输出到标准输出
$ babel example.js --out-file compiled.js  # 转码结果写入一个文件
$ babel example.js -o compiled.js          # 转码结果写入一个文件
$ babel src --out-dir lib                  # 整个目录转码
$ babel src -d lib                         # 整个目录转码
$ babel src -d lib -s                      # -s 参数生成source map文件

参考:

http://www.cnblogs.com/diligenceday/p/5453523.html
http://www.ruanyifeng.com/blog/2016/01/babel.html

时间: 2024-12-22 05:18:13

Babel 入门教程的相关文章

gulp的使用以及Gulp新手入门教程

Gulp新手入门教程 原文  http://w3ctrain.com/2015/12/22/gulp-for-beginners/ Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript.压缩图片 当然Gulp能做的远不止这些.如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器.Gulp真的足够强大,但你必须学会驾驭它. 这是这篇文章的主要目的.帮助你了解Gu

npm 与 package.json 快速入门教程

npm 与 package.json 快速入门教程 2017年08月02日 19:16:20 阅读数:33887 npm 是前端开发广泛使用的包管理工具,之前使用 Weex 时看了阮一峰前辈的文章了解了一些,这次结合官方文章总结一下,加深下理解吧! 读完本文你将了解: 什么是 npm? 安装 npm 更新 npm package.json 文件 package.json 如何创建 package.json 的内容 指定依赖的包 Semantic versioning(语义化版本规则) 安装 pa

<zz>bower入门教程

from http://www.cnblogs.com/xiaokai0203/p/5891927.html bower入门教程 什么是bower Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源.其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt,这个会在以后的文章中介绍. 准备工作 安装node环境:node.js 安装Git,bower从远程git仓库获取代码包:git简易指南 安装bower 使用

【转载】GBDT(MART) 迭代决策树入门教程 | 简介

      转载地址:http://blog.csdn.net/w28971023/article/details/8240756        GBDT(Gradient Boosting Decision Tree) 又叫 MART(Multiple Additive Regression Tree),是一种迭代的决策树算法,该算法由多棵决策树组成,所有树的结论累加起来做最终答案.它在被提出之初就和SVM一起被认为是泛化能力(generalization)较强的算法.近些年更因为被用于搜索排

SEO学习步骤总结入门教程

在这里,简单的把SEO的学习步骤说了一下,今天我们一起来把SEO学习步骤每一步的主要内容拿出来重点强调一下并做个总结.  定位好网站内容以后把你所想做排名的关键词定位好,关键词里包括了主关键词和长尾关键词.这里重点强调了不可以忽略长尾关键词的作用.  对于一个好的网站结构可以让搜索引擎蜘蛛顺利的抓取我网站的内容,进而达到被收录的目的.比较有利于蜘蛛抓取的网站结构,一般来说,收录数量相对来说会比较多.,只有让搜索引擎收录你网站页面那搜索引擎才会释放出来,这样网站关键词才可能有排名.  这里重点要注

Android基础入门教程——10.12 传感器专题(3)——加速度-陀螺仪传感器

Android基础入门教程--10.12 传感器专题(3)--加速度/陀螺仪传感器 标签(空格分隔): Android基础入门教程 本节引言: 本节继续来扣Android中的传感器,本节带来的是加速度传感器(Accelerometer sensor)以及 陀螺仪传感器(Gyroscope sensor),和上一节的方向传感器一样有着x,y,z 三个轴, 还是要说一点:x,y轴的坐标要和绘图那里的x,y轴区分开来!传感器的是以左下角 为原点的!x向右,y向上!好的,带着我们的套路来学本节的传感器吧

Android基础入门教程——8.1.3 Android中的13种Drawable小结 Part 3

Android基础入门教程--8.1.3 Android中的13种Drawable小结 Part 3 标签(空格分隔): Android基础入门教程 本节引言: 本节我们来把剩下的四种Drawable也学完,他们分别是: LayerDrawable,TransitionDrawable,LevelListDrawable和StateListDrawable, 依旧贴下13种Drawable的导图: 1.LayerDrawable 层图形对象,包含一个Drawable数组,然后按照数组对应的顺序来

Android基础入门教程——8.1.2 Android中的13种Drawable小结 Part 2

Android基础入门教程--8.1.2 Android中的13种Drawable小结 Part 2 标签(空格分隔): Android基础入门教程 本节引言: 本节我们继续来学习Android中的Drawable资源,上一节我们学习了: ColorDrawable:NinePatchDrawable: ShapeDrawable:GradientDrawable!这四个Drawable~ 而本节我们继续来学习接下来的五个Drawable,他们分别是: BitmapDrawable:Insert

Android基础入门教程——2.3.12 Date & Time组件(下)

Android基础入门教程--2.3.12 Date & Time组件(下) 标签(空格分隔): Android基础入门教程 本节引言: 本节我们来继续学习Android系统给我们提供的几个原生的Date & Time组件,他们分别是: DatePicker(日期选择器),TimePicker(时间选择器),CalendarView(日期视图),好吧, 其实一开始让我扣这几个玩意我是拒绝的,因为在我的印象里,他们是这样的: 简直把我丑哭了,有木有,终于知道为什么那么多人喜欢自定义这种类型的