babel安装及使用
安装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安装及使用的更多相关文章
- babel安装
大家都知道目前ES6不是浏览器全部都是支持的,所以要通过转码器先进行转码然后再编译代码.小心在学习ES6之前先安装了babel转码器,虽然当时安装的时候困难重重,遗憾的是没有把解决方案总结一下,别人询 ...
- Babel 安装教程
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持.下面是一个例子. // 转码前 inpu ...
- Babel安装在本地并用webstrom由ES6转Es5
1进入到根目录 2安装babel npm install babel-cli --save-dev 3安装其他库 npm install --save-dev babel-preset-env 4创 ...
- es6 babel 安装以及使用
1,安装好node(需要使用npm包管理工具) 2,在本地项目路径下npm init,格式化成功后会在项目下生成一个配置文件package.json 3,本地安装bable npm install - ...
- 前端自动化之babel本地化安装
npm添加package.json cd到项目根目录直接调用npm init 会创建package.json文件 本地安装bebel(并非全局安装,这种情况下cmd命令中babel命令不识别): 步骤 ...
- babel的使用以及安装配置
简介 babel是一个广泛使用的转码器,可以将ES6代码转化为ES5代码,从而在现有环境执行,这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持. 安装及配置 npm install ...
- 利用Babel来转化你的ES2015脚本初步
我们在前面已经安装和学习过babel 安装babel-cli 这是babel解释器的客户端主程序 npm install -g babel-cli 安装”编译”插件(babel的JSX语法转换器) n ...
- 如何使用Babel将ES6转码为ES5?
一.前言: 当我们还在沉迷于ES5的时候,殊不知ES6早就已经发布几年了.时代在进步,WEB前端技术也在日新月异,是时候做些改变了! ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器 ...
- WebStorm ES6 语法支持设置&babel使用及自动编译
一.语法支持设置 Preferences > Languages & Frameworks > JavaScript 二.Babel安装 1.全局安装 npm install -g ...
随机推荐
- 杨巧丽 实验十四 团队项目评审&课程学习总结
实验十四 团队项目评审&课程学习总结 项目 内容 这个作业属于哪个课程 (https://www.cnblogs.com/nwnu-daizh/) 这个作业的要求在哪里 (https://ww ...
- acwing 算法面试、笔试题公开课整理记录
week1 Google KickStart 2019 A轮 讲解视频地址AcWing 549. 训练 tag: 排序 遍历 在线练习地址AcWing 550. 包裹 在线练习地址Ac ...
- Hibernate框架学习2
集合映射 public class User { // 一个用户,对应的多个地址 private Set<String> address; private List<String&g ...
- selenium--页面元素是否可见和可操作
判断元素是否可见 from selenium import webdriver import unittest class Test_Display(unittest.TestCase): def t ...
- 【meet in the mid】【qbxt2019csp刷题班day1C】birthday
Description 给定一个长度为 \(n\) 序列,值域为 \([1, v]\),每次选择一段区间,要求在这个区间上选择一些元素加入到两个集合中,每个元素要么不选要么只能加入一个集合,要求两个集 ...
- 深入js系列-类型(对象)
开篇 值的传递方式 1.值传递 表示传递过程中复制了值 2.引用传递 表示传递过程中传递的是值的引用 js的传递方式 值传递 看下面的例子 // 这里值传递很容易理解 var a = 1 var b ...
- button 在chrome浏览器下被点击时会出现一个橙色的边框
问题描述: button在chrome浏览器下被点击时会出现一个橙色的边框 在button上添加 :focus{outline:none;}也无法解决. 解决办法: 在button上添加 :focus ...
- Nginx通过geo模式实现限速白名单和全局负载均衡 - 运维笔记
Nginx的geo模块不仅可以有限速白名单的作用,还可以做全局负载均衡,可以要根据客户端ip访问到不同的server.比如,可以将电信的用户访问定向到电信服务器,网通的用户重 定向到网通服务器”,从而 ...
- c# winFrom Close报错 System.ObjectDisposedException:“无法访问已释放的对象。
System.ObjectDisposedException:“无法访问已释放的对象. ObjectDisposed_ObjectName_Name” 查了一下发现是 InitializeCompon ...
- 【转】【linux】查看文件夹大小
du的用法 du命令用来查看目录或文件所占用磁盘空间的大小.常用选项组合为:du -sh du常用的选项: -h:以人类可读的方式显示 -a:显示目录占用的磁盘空间大小,还要显示其下目录和文件占用磁盘 ...