babel安装及使用
时间:2019-08-21
本文章向大家介绍babel安装及使用,主要包括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);
原文地址:https://www.cnblogs.com/wyongz/p/11387999.html
- C++课程设计类作业4
- [接口测试 - 基础篇] 01 你应该了解的协议基础
- 代码分享系列(1)之感知机【代码可下载】
- C++课程设计类作业3
- [快学Python3]INI文件读写
- 【专知-PyTorch手把手深度学习教程08】NLP-PyTorch: 用字符级RNN生成名字
- Codeforces Round #415 (Div. 2)(A,暴力,B,贪心,排序)
- BZOJ 2456: mode(新生必做的水题)
- 【专知-PyTorch手把手深度学习教程07】NLP-基于字符级RNN的姓名分类
- Codeforces Round #301 (Div. 2)(A,【模拟】B,【贪心构造】C,【DFS】)
- 【专知-PyTorch手把手深度学习教程06】NLP-Word Embedding快速理解与PyTorch实现: 图文+代码
- [linux][memory]memcmp几种实现和性能对比
- 蒙特卡洛算法及其实现
- 【专知-PyTorch手把手深度学习教程05】Dropout快速理解与PyTorch实现: 图文+代码
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 最全解密微信红包随机算法(含代码实现)
- 两次死锁的分析
- 一次解决你的图像尺寸和定位问题。
- vuedraggable实现列表拖动排序
- 在 Xcode 中添加 Swift package 依赖
- 浅谈JavaScript中的apply,call和bind
- Git 的简单使用
- 移动端适配
- 《Algorithms Unlocked》读书笔记1——循环和递归
- 《Algorithms Unlocked》读书笔记2——二分查找和排序算法
- 《Algorithms Unlocked》读书笔记3——计数排序
- vue-element-admin
- 二叉树的递归算法
- mongoDB基本操作
- 一个 Vue + Node + MongoDB 博客系统