Window10下babel的安装以及使用

最新推荐文章于 2022-10-14 21:48:30 发布

ShuaiBro

最新推荐文章于 2022-10-14 21:48:30 发布

阅读量861

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： nodejs babel 前端大前端

本文链接：https://blog.youkuaiyun.com/PrimaryMe/article/details/119492352

前端专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在Windows10上安装Node.js，修改全局包路径，检查安装状态，以及如何安装和配置Babel插件。通过创建工作区，初始化项目，安装Babel CLI，配置.babelrc文件，安装转码器，最后演示了如何将ES6代码转码为ES5。此外，还讲解了配置Node.js环境变量，确保可以正常使用Babel命令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Window10下babel的安装

NodeJs的安装

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);