使用babel
1).Babel支持NPM包形式的安装,打开命令行窗口,切换到项目根目录,命令如下
npm install babel-cli
2).安装成功后,在package.json文件里添加如下代码
"scripts":{
"start":"babel test.js --out-file test-compiled.js"
}
3).创建一个使用了ES6语法的javascript文件test.js 输入如下代码:
[1,2,3].map(n=>n+1);
4). test.js文件里的代码使用了ES6的箭头函数,需要使用babel解码。打开命令行窗口,输入如下命令:
npm run start
5).编译过后的代码输出到了test-compiled.js 代码如下
[1,2,3].map(n=>n+1);
6).编译后的代码没有变化,babel没有将箭头函数转换成普通函数,babel默认不对任何语法转换,需要事先通过配置文件来指定转码es6语法特性。创建配置文件"。babelrc",代码如下
{
“plugins”:[
"transform-es2015-arrow-functions"
]
}
7).安装babel转换插件。打开命令行窗口,输入如下命令:
npm install babel-plugin-transform-es2015-arrow-functions
注意:配置文件中插件的名字跟安装的NPM包的名字并不相同,配置文件内会省略前缀"babel-plugin"
8).再次使用babel进行转码,打开命令窗口,输入如下命令:
npm run start
打开转码后的文件test-compiled.js 里面包含如下代码:
"use strict"
[1,2,3].map(function(n){return n+1 ;})
箭头函数已经转换成了普通函数,转换后的代码可以直接在浏览器运行。
插件“transform-es2015-arrow-functions”只负责对箭头函数转码,如果需要转码其他的ES6特性,需添加对应的插件到配置文件。babel插件列表可以通过访问页面
http://babeljs.io/docs/plugins查看,里面包含了现有插件以及每个插件的使用方法和转码效果。
使用babel的更多相关文章
- babel presets stage-x
在一些新框架的代码中,常基于es6/7标准来书写代码.鉴于这些标准被没有被浏览器广泛支持,我们一般使用babel来将使用e6/7标准书写的代码降级编译(或者说转译)为浏览器可解析的es4/5代码. 以 ...
- ES6转换器之Babel
ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都 ...
- Babel:JavaScript编译器
一.介绍: Babel是一个Javascript编译器,可以将ES6语法转换成ES5. 这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持.下面是一个例子: //转码前: input. ...
- 学习 React(jsx语法) + es2015 + babel + webpack
视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...
- Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探
用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...
- Babel下的ES6兼容性与规范
前端开发 Babel下的ES6兼容性与规范 ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...
- 【前端】在Gulp中使用Babel
Install $ npm install --save-dev gulp-babel babel-preset-es2015 用法1: const gulp = require('gulp'); c ...
- 使用 Babel + React + Webpack 搭建 Web 应用
话不说直接上正题. 环境搭建 Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现 ...
- Babel 学习
一,为了更明白地使用Babel, 先了解Babel 的发展过程. 现在Babel的版本是6, 相对于以前的版本, 它做了重大更新: 1, 模块化:所有的内部组件都变成了单独的包.打开Babel在Git ...
- 利用Babel来转化你的ES2015脚本初步
我们在前面已经安装和学习过babel 安装babel-cli 这是babel解释器的客户端主程序 npm install -g babel-cli 安装”编译”插件(babel的JSX语法转换器) n ...
随机推荐
- 软工读书笔记 week 5 ——《构建之法》
本周主要对<构建之法>中的一部分进行阅读. 一.软件与软件工程究竟是什么? 本书的概论部分就指出“软件 = 程序 + 软件工程”.而我们这门课的名字就叫“现代软件工程”.其实在上课之前,我 ...
- zabbix连不上数据库
[root@localhost etc]# tail -f /var/log/zabbix_server.log 1267:20130722:195451.493 [Z3001] connection ...
- 一、python小功能记录——监听键盘事件
1.监听键盘按键 from pynput.keyboard import Listener def press(key): print(key.char) with Listener(on_press ...
- linux下常用命令:
常用指令 ls 显示文件或目录 -l 列出文件详细信息l(list) -a 列出当前目录下所有文件及目录,包括隐藏的a(all) mkdir ...
- struts2面试整理
struts2的工作原理 客户端发送请求 经过一系列的过滤器 FilterDispatcher通过ActionMapper来决定这个REquest需要调用的Action FilterDispather ...
- 原生JS写了一个小demo,根据输入的数字生成不同背景颜色的小方块儿~
昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方 ...
- WebSocket消息推送
WebSocket协议是基于TCP的一种新的网络协议,应用层,是TCP/IP协议的子集. 它实现了浏览器与服务器全双工(full-duplex)通信,客户端和服务器都可以向对方主动发送和接收数据.在J ...
- P2149 [SDOI2009]Elaxia的路线
题目描述 最近,Elaxia和w**的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们 必须合理地安排两个人在一起的时间. Elaxia和w**每天都要奔波于宿舍和实验室之间,他们 希望在 ...
- TensorFlow学习('utf-8' codec can't decode byte 0xff in position 0: invalid start byte)
使用语句: image_raw_data = tf.gfile.GFile("./picture.jpg", "r").read() 读取图像时报错如下: Un ...
- 【PHP】mysql_insert_id() 函数
mysql_insert_id() 函数返回上一步 INSERT 操作产生的 ID. 如果上一查询没有产生 AUTO_INCREMENT 的 ID,则 mysql_insert_id() 返回 0. ...