一. 简介

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。

二. 安装 babel-cli

Babel提供babel-cli工具，用于命令行转码。

#安装babel-cli
cnpm install -g babel-cli#查看是否安装成功
babel --version

三. 代码示例

1. 初始化项目

首先新建一个文件夹

然后用如下命令初始化一个项目

npm init -y

项目创建完毕后可以看到生成了package.json文件

2. 编写es6代码

在package.json同级目录下新建src目录，其中新建test.js文件，用于编写es6代码

//ES6代码
let name = "zsr";
const address = "湖北武汉";
let arr = [1, 2, 3, 4, 5];
let newarr = arr.map(a => a * 2);
console.log(name);
console.log(address);
console.log(newarr);

3. 编写babel配置文件

Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件

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

4. 安装转码器

打开cmd，切换到项目根目录，输入如下指令

cnpm install --save-dev babel-preset-es2015

5. 转码

方式一

babel src -d dist

然后就可以看到生成了dist\test.js文件

我们打开该文件

"use strict";//ES6代码
var name = "zsr";
var address = "湖北武汉";
var arr = [1, 2, 3, 4, 5];
var newarr = arr.map(function (a) {return a * 2;
});
console.log(name);
console.log(address);
console.log(newarr);

可以看到，原先的es6语法被转换成了es2015的语法

方式二

也改写package.json，添加

"dev": "babel src -d dist"

然后转码的时候，执行以下命令即可

npm run dev

Babel 快速入门相关推荐

001-ant design安装及快速入门【基于纯antd的基本项目搭建】
一.安装使用 1.1.安装推荐使用 npm 或 yarn 的方式进行开发 npm install antd --save yarn add antd 1.2.浏览器引入在浏览器中使用 script ...
webpack快速入门教程
webpack快速入门教程 1.webpack 介绍什么是webpackhttps://www.webpackjs.com/ Webpack是一个模块打包器(bundler) 在Webpack看来, ...
微信小程序wepy框架快速入门
微信小程序wepy框架快速入门微信小程序简介微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一 ...
React框架快速入门
React快速入门 React快速入门 ReactJS介绍 ReactJS是什么 React高效的原因 React的几个重要概念 React的使用与使用有关的理解写个Hello world Rea ...
Shiro第一个程序:官方快速入门程序Qucickstart详解教程
目录一.下载解压二.第一个Shiro程序 1. 导入依赖 2. 配置shiro配置文件 3. Quickstart.java 4. 启动测试三.shiro.ini分析四.Quickstart. ...
计算机入门新人必学,异世修真人怎么玩？新手快速入门必备技巧
异世修真人怎么快速入门?最近新出来的一款文字修仙游戏,很多萌新不知道怎么玩?进小编给大家带来了游戏新手快速入门技巧攻略,希望可以帮到大家. 新手快速入门攻略 1.开局出来往下找婆婆,交互给点钱,旁边有 ...
Spring Boot 2 快速教程：WebFlux 快速入门（二）
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘 ...
Apache Hive 快速入门 (CentOS 7.3 + Hadoop-2.8 + Hive-2.1.1)
2019独角兽企业重金招聘Python工程师标准>>> 本文节选自<Netkiller Database 手札> 第 63 章 Apache Hive 目录 63.1. ...
《iOS9开发快速入门》——导读
本节书摘来自异步社区<iOS9开发快速入门>一书中的目录,作者刘丽霞 , 邱晓华,更多章节内容可以访问云栖社区"异步社区"公众号查看目录前言第1章 iOS ...

Babel 快速入门

目录