使用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 ...
随机推荐
- apply方法和call方法的详解2
1.apply和call的区别在哪里 2.什么情况下用apply,什么情况下用call 3.apply的其他巧妙用法(一般在什么情况下可以使用apply) 我首先从网上查到关于apply和call的定 ...
- Hibernate_Validator学习
1. Hibernate Validator介绍 1.1 背景 在任何时候,当你要处理一个应用程序的业务逻辑,数据校验是你必须要考虑和面对的事情.应用程序必须通过某种手段来确保输入进来的数据从 ...
- ZT Android的引用计数(强弱指针)技术及一些问题
Android的引用计数(强弱指针)技术及一些问题 分类: Android 2013-06-07 18:25 844人阅读 评论(4) 收藏 举报 目录(?)[+] Android C++框架层的引用 ...
- Vue中$refs的用法
说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个 ...
- Spring的IoC与AOP的理解
1.Spring它到底是什么? Spring是一个开源的Java应用程序开发框架,为了解决企业应用开发的复杂性而创建的. 在spring中,它会认为一切Java类都是资源,而资源就是Bean,容纳 ...
- 本地缓存和redis
项目中的传统架构在服务启动时 读取数据库的大部分数据到本地内存,在看到redis的作用时发出疑问,到底有什么样的区别以及怎么选择呢,下面是别人的回答 使用本地缓存快还是使用redis缓存好? Redi ...
- JavaScript事件的委派与事件的绑定
事件的委派 在很多需求中,通常元素是动态创建添加到一个父元素中的,这时候我们点击新增的元素是没有反应的 <script type="text/javascript"> ...
- sychronized关键字(多线程)
sychronized关键字: 1. 作用:利用该关键字来创建内置锁,实现线程同步: 2. 分类:(1)sychronized同步方法:(2)sychronized同步代码块: 3. sychroni ...
- 以太网,IP,TCP,UDP数据包分析
http://www.cnblogs.com/feitian629/archive/2012/11/16/2774065.html 网络层的IP 协议是构成Internet 的基础.IP 协议不保证传 ...
- 【[APIO2007]动物园】
我好\(sb\)啊,把\(>>\)打成\(<<\)结果就写了两节课 那个一个人只能看到五个动物显然很鬼畜 那我们就可以压这一维了 \(dp[i][s]\)表示从第\(i\)个位 ...