Babel入门

Babel简介

Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。

中文文档

安装

npm install -g bable-cli 全局安装
babel --version 查看版本
在这里插入图片描述

Babel的使用

1、首先我们创建一个目录,使用npm init -y 初始化一个node工程
2、编写一段程序,基于es6(es2015)语法


let name = "xiuyuandashen";
let title = "es6语法";
let arr=[1,2,3,4,5,6];let newArr = arr.map(a=>a*2);
console.log("name= ",name);
console.log("titlle= ",title);
console.log("newArr",newArr);

3、在项目根目录(与package.json同级),创建一个名为.babelrc.babelrc.json或者babel.config.jsbabel.config.json的文件
在这里插入图片描述
重要参数:

  • plugins:Babel插件可以将输入源码进行转换,输出编译后的代码。

  • presets:一组Babel插件,目的是方便使用。官方已经内置了一些preset,如babel-preset-env。

4、安装相应的转换器,我们需要通过解释器将我们的代码转换成浏览器可以支持的版本。
npm install --save-dev babel-preset-es2015 这是安装es2015的转换器

5、执行转换 babel src -d distsrc目录下的代码转换成浏览器可以支持的代码,并将代码保存至dist目录中 。

  • 指定转换单个文件babel src/test.js --out-file dist2/test2.js 将src下的test.js文件转换后保存至dist2/test2.js(--out-file 可以使用-o代替)
  • -d 或者 --out-dir 可以 将整个目录转码 如 babel src -d dist
    在这里插入图片描述

转换之后的代码,与未转换前的对比,将箭头函数改为function

"use strict";var name = "xiuyuandashen";
var title = "es6语法";
var arr = [1, 2, 3, 4, 5, 6];var newArr = arr.map(function (a) {return a * 2;
});
console.log("name= ", name);
console.log("titlle= ", title);
console.log("newArr", newArr);

自定义脚本(简化命令输入)

我们可以在package.json脚本中定义命令。(Vue中所谓的npm run dev 也是如此)


{......,"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build":"babel src -d dist2"},......
}

scripts中定义的key,我们可以通过npm run key来访问,这样的话运行的命令就是key所对应的value命令了。

比如:上边运行npm run build 相当于运行了babel src -d dist2
在这里插入图片描述
在这里插入图片描述

以上这些都是后期前端框架的基础,,

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/548021.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Server 2012使用Windows PowerShell cmdlet安装角色和角色服务功能

Server 2012使用Windows PowerShell cmdlet安装角色和角色服务功能 Server 2012使用Windows PowerShell cmdlet安装角色和角色服务功能 Windows Server 2012 安装 SQL server 2008 出现了如下错误:解决方案1(简单,界面操作)&…

commonjs 和 es6模块化开发入门

commonjs模块化 首先写一个api,提供给外部调用 //commonjslet sum (a,b)> ab;// 暴露接口 module.exports {sum // sum:sum }导入调用 const m require(./Api.js)console.log(m.sum(10,20));es6模块化 首先写一个api,提供给外部调用 //es6 exp…

黑马程序员_7k面试题交通管理系统

------- android培训、java培训、期待与您交流! ---------- //以下知识来在张孝祥老师的讲解总结 项目需求 模仿实现十字路口的交通灯系统逻辑,具体需求如下 1.异步随机生成按照各个线路行驶的车辆 例如: 由南而来去往北向的车辆......直行车…

eclipse搭建maven开发环境

eclipse搭建maven开发环境 eclipse搭建maven开发环境 maven作为一个项目构建工具,在开发的过程中很受欢迎,可以帮助管理项目中的bao依赖问题,另外它的很多功能都极大的减少了开发的难度,下面来介绍maven的安装及与eclipse的集成。…

mybatis-plus (3.4.2)使用

快速入门 官方文档快速入门案例 配置日志 # 配置日志mybatis-plus:configuration:# 配置 mybatis-plus执行的日志类型(可以看到执行过程) 下面是使用了控制台输出 sl4j log4j 等等都可以log-impl: org.apache.ibatis.logging.stdout.StdOutImpl效果 CRUD扩展 数据库中未指定…

SMTP 错误代码大全

为什么80%的码农都做不了架构师?>>> 421 Service not available, closing transmission channel (This may be a reply to any command if the service knows it must shut down) 450 Requested mail action not taken: mailbox unavailable (E.g., mai…

VituralBox从零搭建基于CentOS 7(64位)的Kubernetes+docker集群

VituralBox从零搭建基于CentOS 7(64位)的Kubernetesdocker集群 1. 下载CentOS 7官方minimal镜像2. 安装VituralBox(Windows 10 64位)3. 安装Git for windows(Windows 10 64位)4. 安装VituralBox虚拟机并创…

使用阿里云对象存储OSS收藏老婆新垣结衣日常照

目录阿里云OSS官方文档开通阿里云OSS服务入门使用java代码上传文件至OSS1、准备工作:创建阿里云OSS许可证(获取对Api的访问权限)选择继续使用 AccessKey创建AccessKey创建成功springBoot整合OSS依赖配置文件 application.yaml常量工具类OssControllerOssService效果…

当用户流失比较明显后, 如何提升活跃度? push notification 是一个有效的方式吗?...

当用户流失比较明显后, 如何提升活跃度? push notification 是一个有效的方式吗?添加评论 分享按票数排序10 个回答赞同反对,不会显示你的姓名Linda Jiang,友盟商务副总裁17 票,来自 LaneYu、程希冀、邹雪梅…

无法生成部件汇总表_RFID在汽车零部件企业仓储物流中的应用

随着物流行业的快速发展,RFID技术也逐渐得到了广泛应用。借助RFID技术,能在一定程度上切实促进数据和信息之间的快速传递,与此同时,这种传递方式属于非接触性的。现在RFID技术在不同领域得到了广泛应用,例如供应链管理,公交卡等.特别在近些年来,随着物流行业快速发展,RFID技术在…

CentOS7 源码编译安装NodeJS 最新版本Shell脚本

1,环境: 操作系统 CentOS Linux release 7.6.1810 (Core) 服务器环境 “腾讯云”服务器 cat /etc/centos-release # 查看centos系统版本 Node.js源码包下载地址:https://nodejs.org/dist/ 这里我们选择“Node.js v9.9.0” 执行如…

EasyExcel入门使用

目录标题官网github地址中文文档简单读简单写说明官网github地址 地址 中文文档 中文文档 简单读 import com.alibaba.excel.annotation.ExcelIgnore; import com.alibaba.excel.annotation.ExcelProperty; import lombok.Data;import java.util.Date;/*** Created with I…

git 创建webpack项目_从0到1开发一个小程序cli脚手架(一)创建页面/组件模版篇...

github地址:https://github.com/jinxuanzheng01/xdk-clicli工具是什么?在正文之前先大致描述下什么是cli工具,cli工具英文名command-line interface,也就是命令行交互接口,比较典型的几个case例如,create-react-app&am…

Nginx 502 Bad Gateway 错误的原因及解决方法

2019独角兽企业重金招聘Python工程师标准>>> 刚才在调试程序的时候,居然服务器502错误,昨天晚上也发生了,好像我没有做非常规的操作。 然后网上寻找了下答案, 把一些原因及解决方法汇总一下,以防生产环境下…

easyExcel实现导入数据库

目录标题需求easyExcel Maven 依赖过程效果需求 我们需要将excel的数据导入至数据库中。 easyExcel Maven 依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.2.6</version></dep…

CentOS7 shell脚本安装jdk

1&#xff0c;系统环境 操作系统 CentOS Linux release 7.6.1810 (Core) 64位 下载 Java SE Development Kit 8u152&#xff0c;文件名&#xff1a;jdk-8u152-linux-x64.rpm&#xff0c;下载地址&#xff1a;https://www.oracle.com/technetwork/java/javase/downloads/ja…

如何解决在使用ElementUI时发现有些控件是英文的

如下图 解决 我们需要在入口文件 main.js 中将 ElementUI 的默认语言改为中文。 import locale from element-ui/lib/locale/lang/en // lang i18n 英文 import zhLocale from element-ui/lib/locale/lang/zh-CN // 中文// 选择elementUi 默认语言为中文 Vue.use(ElementUI, …

CentOS7 源码编译安装Python3 shell脚本

1&#xff0c;系统环境 操作系统 CentOS Linux release 7.6.1810 (Core) 64位 2&#xff0c;Linux的Python3安装后即集成了pip&#xff0c;无需重新独立安装pip&#xff0c;执行以下命令完成python3和pip3的安装 yum groupinstall -y "Development tools" # 安…

ElementUI+Java实现搜索提示列表

效果 实现流程 首先我们需要在后端获取数据&#xff0c;我们可以根据name属性去模糊查询&#xff0c;返回Map类型的列表 然后将它返回给前端。 controller ApiOperation("根据关键字查询讲师名列表")GetMapping("list/name/{key}")public ResultVo sele…

CentOS7 搭建Pulsar 消息队列环境,CentOS(Linux)部署Pulsar,亲测成功,以及Python操作Pulsar实例驱动

在 最佳开源数据库与数据分析平台奖 中&#xff0c;之前曾连续两年入选的 Kafka 意外滑铁卢落选&#xff0c;取而代之的是新兴项目 Pulsar&#xff0c;Bossie Awards中对 Pulsar 点评如下&#xff1a;“Pulsar 旨在取代 Apache Kafka 多年的主宰地位。Pulsar在很多情况下提供了…