(开发)bable - es6转码
参考:http://www.ruanyifeng.com/blog/2016/01/babel.html
Babel
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行
// 转码前 input.map(item => item + 1); // 转码后 input.map(function (item) { return item + 1; });
配置文件
配置文件是
.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件{ "presets": [], "plugins": [] }presets字段 设定转码规则,官方提供以下的规则集,你可以根据需要安装# ES2015转码规则 $ npm install --save-dev babel-preset-es2015 # react转码规则 $ npm install --save-dev babel-preset-react # ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个 $ npm install --save-dev babel-preset-stage-0 $ npm install --save-dev babel-preset-stage-1 $ npm install --save-dev babel-preset-stage-2 $ npm install --save-dev babel-preset-stage-3{ "presets": [ "es2015", "react", "stage-2" ], "plugins": [] }
babel-register
babel-register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel进行转码
$ npm install --save-dev babel-register
使用时,必须首先加载babel-register
require("babel-register");
require("./index.js");
然后,就不需要手动对index.js转码了。
需要注意的是,babel-register只会对require命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用
babel-core
如果某些代码需要调用Babel的API进行转码,就要使用babel-core模块。
安装命令 : $ npm install babel-core --save , 然后,在项目中就可以调用babel-core。
var babel = require('babel-core');
// 字符串转码
babel.transform('code();', options);
// => { code, map, ast }// 文件转码(异步)
babel.transformFile('filename.js', options, function(err, result) {
result; // => { code, map, ast }
});// 文件转码(同步)
babel.transformFileSync('filename.js', options);
// => { code, map, ast }// Babel AST转码
babel.transformFromAst(ast, code, options);
// => { code, map, ast }配置对象options,可以参看官方文档http://babeljs.io/docs/usage/options/
下面是一个例子。
var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core').transform(es6Code, {
presets: ['es2015']
})
上面代码中,transform方法的第一个参数是一个字符串,表示需要转换的ES6代码,第二个参数是转换的配置对象。
babel-polyfill
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。
解决方案:使用babel-polyfill,为当前环境提供一个垫片
$ npm install --save babel-polyfill
在脚本头部,加入如下一行代码:
import 'babel-polyfill';
// 或者
require('babel-polyfill');
(开发)bable - es6转码的更多相关文章
- WEB前端开发学习:源码canvas 雪
WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> ...
- C#微信公众号开发-高级接口-之模板消息开发,附源码
个人觉得模板消息功能的增加对公众号的作用非常大,可以说是真正意义上的实现了所谓的轻app,商家可以通过模板消息给用户发送重要的信息,交易.预约.消费.邮件.物流等信息.之前我做过的系统通过邮件发送订单 ...
- Android开发 QRCode二维码开发第三方框架
前言 Android开发里二维码开发经常用到,这里简单的介绍下Android开发里的二维码. 最广泛使用的二维码库zxing zxing是最广泛的二维码库各个平台都可以适用它,但是Android平台使 ...
- Android | 教你如何开发扫二维码功能
前言 最近要做一个停车场扫码收费的app,在网上搜了一圈,首先接触到了ZXing,上手试了下,集成过程不复杂,但是感觉效果欠佳,比如距离稍微远点儿就扫不出来了,另外角度对的不好,反光或者光线比较暗 ...
- es6转码器-babel
babel 基本使用 安装转码规则 # ES2015转码规则 $ npm install --save-dev babel-preset-es2015 # react转码规则 $ npm instal ...
- es6转码和package.json中的配置
在线实时转换 需要babel-register .babelrc中: { "presets": [ "es2015" ] } 项目中main.js配置: 前提是 ...
- tornado高效开发必备之源码详解
前言:本博文重在tornado源码剖析,相信读者读完此文能够更加深入的了解tornado的运行机制,从而更加高效的使用tornado框架. 本文参考武sir博客地址:http://www.cnblog ...
- 移动web app开发必备 - Deferred 源码分析
姊妹篇 移动web app开发必备 - 异步队列 Deferred 在分析Deferred之前我觉得还是有必要把老套的设计模式给搬出来,便于理解源码! 观察者模式 观察者模式( 又叫发布者-订阅者模 ...
- 微信开放平台开发——网页微信扫码登录(OAuth2.0)
1.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供 ...
随机推荐
- Linux安装步骤
1.查看Linux系统是32位还是64位 #查看系统位数 getconf LONG_BIT #或者 uname -m #或者 arch #或者 file /sbin/init 2.IP配置 网络选择桥 ...
- C语言风格字符串的概念、定义、输入字符串、输出字符串
字符串: C语言中最有用.最重要的数据类型之一. 字符串:是以\0字符结尾的char类型数组.所以可以把数组和指针知识应用于字符串. 如何在程序定义字符串: 1.字符串字面量 用双引号括起来的内容称为 ...
- sharepoint_study_8
描述:如何删除webPart无效文件? 图示: 有时候webpart的部署包虽然删除了,但是它的文件依然会留在这个类别中,怎样删除这些无效的文件呢? 解决: 在网站设置中打开web部件,里面列出了网站 ...
- 1001 害死人不偿命的(3n+1)猜想 (15)(15 分)
卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉一半.这样一直反复砍下去,最后一定在某一步得到n=1.卡拉兹在1950年的世界数 ...
- PostgreSQL 存储过程/函数
1.有用的链接 postgresql 常用小函数 Postgresql数据库的一些字符串操作函数 PostgreSQL function里面调用function PostgreSQL学习手册(函数和操 ...
- Tomcat分析-启动过程
Server是Tomcat最顶层的容器 Service用于提供服务 Connector用于处理连接相关的事情,并提供Socket与request和response的转换 Container用于封装和管 ...
- java——斗地主小游戏之洗牌发牌
遇到的问题: 1.int和Integer的区别? 1)Integer是int的包装类,int则是java的一种基本数据类型 . 2)Integer变量必须实例化后才能使用,而int变量不需要 . 3) ...
- 转 python3中SQLLIT编码与解码之Unicode与bytes
#########sample########## sqlite3.OperationalError: Could not decode to UTF-8 column 'logtype' with ...
- linux查看当前用户登陆信息
@(Linux基础)[linux查看当前用户登陆信息] linux查看当前用户登陆信息 作为系统管理员,你可能经常会(在某个时候)需要查看系统中有哪些用户正在活动.有些时候,你甚至需要知道他(她)们正 ...
- mysql 模拟一个自增序列
文章出处:https://sdu0rj.axshare.com/%E4%BA%8C%E7%BA%A7%E5%AE%A2%E6%88%B7%E7%AE%A1%E7%90%86.html mysql没有像 ...