Window10下babel的安装以及使用

NodeJs的安装

在nodejs中文网http://nodejs.cn/下载对应电脑系统版本的nodejs进行安装下载链接：http://nodejs.cn/download/。

Nodejs全局包路径的修改

在Nodejs的安装路径下创建两个文件夹node_global和node_cache

输入以下命令，修改NodeJs的缓存目录和包下载路径：

npm cofig set prefix “D:\nodejs\node_modules\node_global （此处填写自己的路径）”

npm cofig set cache “D:\nodejs\node_modules\node_cache （此处填写自己的路径）”

检查是否安装好nodejs

在命令行窗口输入node -v

如果显示版本号，说明安装成功

Babel：一个将ES6代码转换为ES5代码的插件

![在这里插入图片描述](https://img-blog.csdnimg.cn/f26a1f66ec514dc8ba555059f24973a0.png#pic_center

1. 首先在VScode中创建一个工作区，在工作区中创建一个文件夹
2. 使用npm init -y 初始化
3. npm install -g babel-cli 安装全局的babel
4. 安装完后。node_global文件夹下会创建一个node_modules文件夹，

配置Nodejs环境变量

说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install 模块名 [-g] 的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。
本文是将 nodejs 安装在 D:\soft\nodejs 目录下,以下操作可根据实际安装目录情况进行对应调整。

打开系统属性-高级-环境变量，在系统变量中新建 变量名：NODE_PATH,变量值：D:\soft\nodejs\node_global\node_modules

编辑用户变量的 path，将默认的 C 盘下 APPData/Roaming\npm 修改为 D:\soft\nodejs\node_global

检查是否可以使用babel --version命令查看版本

配置.babelrc

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

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

presets字段设定转码规则，将es2015规则加入 .babelrc：

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

安装转码器

在项目中安装

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

创建ES6编码文件

// 转码前
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input)

转码

# 转码结果写入一个文件
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

转码为ES5的结果为

"use strict";

// 转码前
// 定义数据
var input = [1, 2, 3];
// 将数组的每个元素 +1
input = input.map(function (item) {
  return item + 1;
});
console.log(input);