050_Babel

简介

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

安装

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

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

安装示例

创建文件夹babelpro

进入命令行，安装babel

# 如果没有安装cnpm，使用npm安装
npm install -g babel-cli
# 如果安装了cnpm，使用cnpm安装，速度更快
cnpm install -g babel-cli

测试是否安装成功

babel --version

babel的使用

创建项目文件夹babelpro

初始化项目

npm init -y

生成了package.json文件

创建文件并编写es6代码

// es6
let name = "张三丰";
const address = "武当山";
console.log(name);
console.log(address);
let arr = [1,2,3,4,5];
let newarr = arr.map(a=>a*2);
console.log(newarr);

执行代码

配置.babelrc

创建.babelrc时，报错：必须键入文件名，解决

只需在重命名时写 .babelrc. {注意开头和结尾一共有两个点}

转码规则

# Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。
{
    "presets": [],
    "plugins": []
}
# presets字段设定转码规则，将es2015规则加入 .babelrc：
{
    "presets": ["es2015"],
    "plugins": []
}

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

安装转码器，在项目中安装

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

转码

# npm install --save-dev csv-loader xml-loader
# 转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js
# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2

babel src -d dist

转码前

// es6
let name = "张三丰";
const address = "武当山";
console.log(name);
console.log(address);
let arr = [1,2,3,4,5];
let newarr = arr.map(a=>a*2);
console.log(newarr);

转码后

"use strict";

// es6
var name = "张三丰";
var address = "武当山";
console.log(name);
console.log(address);
var arr = [1, 2, 3, 4, 5];
var newarr = arr.map(function (a) {
  return a * 2;
});
console.log(newarr);

自定义脚本，配置package.json，实现转码

package.json添加转码命令

// build名称可以任意命名
"build":  "babel src -d dist"

{
  "name": "babelpro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
		"build":  "babel src -d dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1"
  }
}

执行转码命令

npm run build

"use strict";

// es6
var name = "张三丰";
var address = "武当山";
console.log(name);
console.log(address);
var arr = [1, 2, 3, 4, 5];
var newarr = arr.map(function (a) {
  return a * 2;
});
console.log(newarr);