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
- 首先在VScode中创建一个工作区,在工作区中创建一个文件夹
- 使用npm init -y 初始化
- npm install -g babel-cli 安装全局的babel
- 安装完后。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);