babel

1 简介

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

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

2 安装

Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：

npm install -g babel-cli

查看是否安装成功

babel --version

3 使用

3.1 创建babel文件夹

3.2 初始化项目

npm init -y

3.3 在babel文件夹中创建文件src/example.js,并写入以下代码

//es6
let name = "xuexiangban";
const title = "广东";
let arr = [1,2,3,4,5,6,7,8,9,10];
let newarr = arr.map(a=>a*2);
console.log(newarr);
console.log(name);
console.log(title);

3.4 在babel文件夹中创建配置文件 .bablerc

{
"presets": ["es2015"]
}

3.5 在项目中安装转码器

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

3.6 将整个src文件夹中的文件转码到dist文件夹中

babel src -d dist

补充:将文件转码到另一个文件:babel 文件路径 --out-file 文件路径

babel exmaple.js --out-file copy.js

3.7 执行结果

会自动生成文件夹和里面的文件,转码后的内容如下:

"use strict";

//es6
var name = "xuexiangban";
var title = "广东";
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var newarr = arr.map(function (a) {
  return a * 2;
});
console.log(newarr);
console.log(name);
console.log(title);

4 自定义脚本

4.1 在package.json文件的script中添加要执行的命令

key : 执行命令的语句

value: 命令的内容

"dev" :"babel src -d dist"

4.2 执行命令

因为在package.json中的key值为dev，可修改为任意值

npm run dev

4.3 执行结果

于第三步的执行结果相同.