安装babel

npm install babel-cli -g

配置babel
  babel是用过插件或者预设来编译代码的
  新建.babelrc文件
  文件中输入一下内容

{
    "presets": [],
    "plugins": []
  }

安装预设

npm install --save-dev babel-preset-es2015

将preset添加到配置文件中  

{
    "presets": ["es2015"],
    "plugins": []
  }

es7中的对象展开符需要一个单独的插件来实现  

npm install babel-plugin-transform-object-rest-spread --save-dev

  添加到配置文件中

 {
    "presets": ["es2015"],
    "plugins": ["transform-object-rest-spread"]
  }

转换 babel 原文件名 -o 目标文件名

示例:

转换前的代码:

let a = [1,2,3,4,5,6]
let b = a.map( num => num*2 )
console.log(b) let mike = {
name:'bike',
age:12
}
let d = {...mike,sex:"male"}
console.log(d)

转换后的代码:

"use strict";

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var a = [1, 2, 3, 4, 5, 6];
var b = a.map(function (num) {
return num * 2;
});
console.log(b); var mike = {
name: 'bike',
age: 12
};
var d = _extends({}, mike, { sex: "male" });
console.log(d);

babel安装及使用的更多相关文章

  1. babel安装

    大家都知道目前ES6不是浏览器全部都是支持的,所以要通过转码器先进行转码然后再编译代码.小心在学习ES6之前先安装了babel转码器,虽然当时安装的时候困难重重,遗憾的是没有把解决方案总结一下,别人询 ...

  2. Babel 安装教程

    Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持.下面是一个例子. // 转码前 inpu ...

  3. Babel安装在本地并用webstrom由ES6转Es5

    1进入到根目录 2安装babel npm install babel-cli --save-dev 3安装其他库 npm install --save-dev  babel-preset-env 4创 ...

  4. es6 babel 安装以及使用

    1,安装好node(需要使用npm包管理工具) 2,在本地项目路径下npm init,格式化成功后会在项目下生成一个配置文件package.json 3,本地安装bable npm install - ...

  5. 前端自动化之babel本地化安装

    npm添加package.json cd到项目根目录直接调用npm init 会创建package.json文件 本地安装bebel(并非全局安装,这种情况下cmd命令中babel命令不识别): 步骤 ...

  6. babel的使用以及安装配置

    简介 babel是一个广泛使用的转码器,可以将ES6代码转化为ES5代码,从而在现有环境执行,这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持. 安装及配置 npm install  ...

  7. 利用Babel来转化你的ES2015脚本初步

    我们在前面已经安装和学习过babel 安装babel-cli 这是babel解释器的客户端主程序 npm install -g babel-cli 安装”编译”插件(babel的JSX语法转换器) n ...

  8. 如何使用Babel将ES6转码为ES5?

    一.前言: 当我们还在沉迷于ES5的时候,殊不知ES6早就已经发布几年了.时代在进步,WEB前端技术也在日新月异,是时候做些改变了! ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器 ...

  9. WebStorm ES6 语法支持设置&babel使用及自动编译

    一.语法支持设置 Preferences > Languages & Frameworks > JavaScript 二.Babel安装 1.全局安装 npm install -g ...

随机推荐

  1. sublime ctrl b突然不能用解决方法

    Sublime Text 2 ?ctrl+b 如果出现运行为空白,按ctrl+`来显示错误,如下所示,转载了一篇解决方案 ? 文章参考:http://eric.themoritzfamily.com/ ...

  2. 网络编程 TCP协议:三次握手,四次回收,反馈机制 socket套接字通信 粘包问题与解决方法

    TCP协议:传输协议,基于端口工作 三次握手,四次挥手 TCP协议建立双向通道. 三次握手, 建连接: 1:客户端向服务端发送建立连接的请求 2:服务端返回收到请求的信息给客户端,并且发送往客户端建立 ...

  3. 11-赵志勇机器学习-DBSCAN聚类

    (草稿) 两点关系的三种定义: 1. 直接密度可达:A在B的邻域内: 2. 密度可达:AB之间存在,直接密度可达的点串: 3. 密度连接:AB之间存在点k,使得Ak和Bk都密度可达: 过程: 1. 对 ...

  4. python递归和内置方法

    递归:函数调用自身 核心:递进的时候能够达到一个结果,问题规模越来越小(不一定要真正的达到):设置一个条件,能够让最后一次函数调用结束 练习: ​ 第一个人的姓名是16岁,后面每个人的年龄都比前一个大 ...

  5. NOIP 2004 联合权值

    洛谷 P1351 联合权值 洛谷传送门 JDOJ 2886: [NOIP2014]联合权值 D1 T2 JDOJ传送门 Description 无向连通图 G有 n个点,n-1条边.点从 1到 n依次 ...

  6. 【myBatis】It's likely that neither a Result Type nor a Result Map was specified.

    因为mapper.xml里把resultType写成了parameterType

  7. arduino控制超声波

    //LingShun LAB #define Trig 2 //引脚Tring 连接 IO D2 #define Echo 3 //引脚Echo 连接 IO D3 float cm; //距离变量 f ...

  8. (HK1-1)海康网络摄像机的使用

    https://blog.csdn.net/u014552102/article/details/86700057 一.手机客户端操作:  首先在莹石商城官网https://www.ys7.com/下 ...

  9. shell脚本显示字体颜色

    shell脚本中echo显示内容带颜色显示,echo显示带颜色,需要使用参数-e 格式如下: echo -e "\033[字背景颜色:文字颜色m字符串\033[0m" 例如: ec ...

  10. Linux下rpm及yum安装jdk

    笔者使用的Linux操作系统为CentOS7,Linux中有三种安装jdk的方式,在这里笔者主要介绍两种方式,即rpm和yum安装及卸载jdk,还有一种是直接从官网下载 tar.gz 压缩文件上传到L ...