【Babel 详细教程】概述，安装，使用，自定义脚本

最新推荐文章于 2023-03-23 17:35:03 发布

超周到的程序员

最新推荐文章于 2023-03-23 17:35:03 发布

阅读量946

点赞数 1

分类专栏：大前端技术 JavaScript 文章标签： ecmascript6 javascript npm 前端

本文链接：https://blog.csdn.net/m0_46360532/article/details/115653307

版权

大前端技术同时被 2 个专栏收录

14 篇文章

订阅专栏

JavaScript

13 篇文章

订阅专栏

本文介绍了Babel的基本用法，它是一个广泛使用的JavaScript转码器，能够将ES6代码转换为ES5，确保在不支持ES6的环境中运行。通过安装babel-cli，配置.babelrc文件，添加es2015预设，然后使用Babel命令进行转码，可以方便地将ES6代码转码并输出到指定文件或目录。

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

前言：学习自：https://www.bilibili.com/video/BV1BU4y147pS?p=24

一、Babel 概述

1、简介

ES6 的某些高级语法在某些浏览器环境甚至是 Node.js 环境中无法执行，Babel 是一个广泛使用的转码器，可以将 ES6 代码转化为 ES5 代码（原理其实利用就是一个ES6 语法糖至 ES5 语法的映射表作为中介转换，总而将实际代码转换为 ES5 版本），从而在现有的环境中执行运行，这意味着，可以放心使用 ES6 的新语法，而不必担心环境是否支持。

2、安装

Babel提供babel-cli工具，用于命令行转码，安装方式：

cnpm install -g babel-cli

检验是否安装成功

babel --version

在这里插入图片描述

二、使用

1、创建一个空文件夹

2、初始化项目

npm init -y

在这里插入图片描述

3、创建目录src，并创建文件 src/example.js ，并使用 ES6 新语法
在这里插入图片描述
4、创建 .babelrc 文件，Babel的配置文件是.babelrc，手动创建在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下

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

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

5、安装转码器（作为 ES6 新语法到 ES5 语法的映射表），在项目中安装

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

多了一个 node_modules 文件
在这里插入图片描述
6、转码

（1）在命令行中查看转码后的代码

babel src/example.js

在这里插入图片描述
（2）将转码后的代码输出到文件

babel src -d dist

在这里插入图片描述

其他指定参数的用法

# 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