当前位置：首页 > news >正文

Babel 基础使用指南：从安装到编译的完整流程

news 来源：原创 2025/7/27 8:43:27

Babel 是当今前端开发中不可或缺的工具，它允许开发者使用最新的 JavaScript 特性，同时确保代码能在各种浏览器和环境中运行。本文将带你从零开始学习 Babel 的基础使用，涵盖安装、配置到实际编译的全过程。

1. 安装 Babel 和插件

首先，我们需要在项目中安装 Babel 的核心包和命令行工具。

# 使用 npm 安装
npm install --save-dev @babel/core @babel/cli# 或者使用 yarn
yarn add --dev @babel/core @babel/cli

@babel/core 是 Babel 的核心功能包，而 @babel/cli 则允许你从命令行使用 Babel。

接下来，根据你的需求安装必要的插件或预设（preset）。预设是一组插件的集合，可以简化配置。最常用的是 @babel/preset-env：

npm install --save-dev @babel/preset-env

2. 创建 Babel 配置文件

Babel 需要配置文件来确定如何转换代码。常见的配置方式有三种：

1. 项目根目录的 babel.config.json 文件，适用于整个项目；

2. .babelrc.json 文件，适用于项目的一部分；

3. package.json 中的 babel 键；

我们创建一个 babel.config.json 文件：

{"presets": [["@babel/preset-env", // 使用 @babel/preset-env 预设{"targets": { // 针对特定浏览器版本进行转换"edge": "17","firefox": "60","chrome": "67","safari": "11.1"},"useBuiltIns": "usage", // 按需引入 polyfill "corejs": "3.6.5" // 使用 core-js 3 版本作为 polyfill 源}]]
}

3. 编写待转换代码文件

创建一个包含现代 JavaScript 语法的文件，例如 src/main.js：

// 箭头函数
const greet = (name) => {return `Hello, ${name}!`;
};// 类属性
class Person {name = 'John';sayHello = () => {console.log(greet(this.name));};
}// Promise 和 async/await
async function fetchData() {const response = await fetch('https://api.example.com/data');const data = await response.json();return data;
}// 可选链操作符
const user = {profile: {name: 'Alice'}
};
console.log(user?.profile?.name);// 使用数组的 includes 方法
const colors = ['red', 'green', 'blue'];
console.log(colors.includes('green'));

4. 执行编译

配置好 Babel 后，可以通过命令行工具执行编译。在 package.json 中添加一个脚本：

{"scripts": {"build": "babel src -d lib"}
}

这个命令会将 src 目录下的所有文件转换后输出到 lib 目录。

运行编译：

npm run build

你也可以直接在命令行中运行：

npx babel src --out-dir lib

编译完成后，你会在 lib 目录下看到转换后的代码，这些代码已经转换为兼容目标浏览器的 ES5 语法。

5. 常用插件与预设

5.1. 常用预设

1. @babel/preset-env：根据目标环境自动确定需要的转换和 polyfill；

2. @babel/preset-react：转换 React 的 JSX 语法；

3. @babel/preset-typescript：转换 TypeScript 代码；

5.2. 常用插件

1. @babel/plugin-transform-runtime：重用 Babel 的辅助代码，减少代码体积；

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

2. @babel/plugin-proposal-class-properties：支持类属性语法；

npm install --save-dev @babel/plugin-proposal-class-properties

3. @babel/plugin-proposal-object-rest-spread：支持对象展开运算符

npm install --save-dev @babel/plugin-proposal-object-rest-spread

5.3. 插件与预设的配置示例

{"presets": ["@babel/preset-env"],"plugins": [["@babel/plugin-transform-runtime", {"corejs": 3}],"@babel/plugin-proposal-class-properties"]
}

6. 总结

通过以上步骤，你已经掌握了 Babel 的基础使用方法：

1. 安装必要的 Babel 核心包和插件/预设；

2. 创建适合项目需求的 Babel 配置文件；

3. 编写使用现代 JavaScript 语法的源代码；

4. 执行编译将代码转换为兼容性更好的版本；

5. 根据项目需求选择合适的插件和预设；

Babel 的强大之处在于它的可配置性和丰富的插件生态，随着项目复杂度的增加，你可以进一步探索更多高级配置和优化选项，如自定义插件、代码压缩等。

Babel 基础使用指南：从安装到编译的完整流程

Babel 是当今前端开发中不可或缺的工具，它允许开发者使用最新的 JavaScript 特性，同时确保代码能在各种浏览器和环境中运行。本文将带你从零开始学习 Babel 的基础使用，涵盖安装、配置到实际编译的全过程。 1. 安装 Babel 和插件首先&…...

编程日记 2025/7/27 8:43:27

uniapp-商城-52-后台商家信息（商家信息数据，云对象使用）

1、概述已经通过好几个篇幅来说明商家信息，包括logo、商家名称，地址，电话以及商家简介。通过表单组件和标签，以及我们的文件上传标签，都做了说明。（logo上传，用的文件上传组件是上传到公共的数…...

编程日记 2025/7/27 1:15:55

【我的创作纪念日】512

机缘还记得 2023 年 12 月 15 日，我撰写了第 1 篇技术博客：《oracle 跟踪文件--审计日志》。从此，这平凡的一天，赋予了我不平凡的意义。在那一刻，我已在创作这趟旅程中出发，并立志将工作中的经验总结&…...

编程日记 2025/7/27 8:31:15

共享内存与信号量结合

在Linux系统中，进程间通信（IPC）和原子性是并发编程中的核心问题。以下是对这些概念的详细分步解释： 一、进程间通信（IPC）方法 1. 管道（Pipe） 匿名管道：用于父子进程等有…...

编程日记 2025/7/27 8:24:42

西门子PLC s7-1200工艺对象“轴”的应用(1)

1. 工艺对象 “ 轴 ” 的概念在西门子 S7-1200 PLC 中，术语 “ 轴 ” 特指用 “ 轴 ” 工艺对象表示的驱动器工艺映像。 “ 轴 ” 工艺对象是用户程序与驱动器之间的接口，用于接收用户程序中的运动控制命令、执行这些命令并监视其运行情况。运动控制…...

编程日记 2025/7/23 5:30:59

ubuntu22.04在 Docker容器中安装 ROS2-Humble

22.04 安装 docker 容器并实现rviz功能 1 docker pull命令拉取包含ROS-Humble的镜像： docker pull osrf/ros:humble-desktop-full-jammy docker images验证该镜像是否拉取成功。使用镜像osrf/ros:humble-desktop-full-jammy创建并运行容器 sudo docker run -it…...

编程日记 2025/7/23 5:31:00

【LwIP源码学习6】UDP部分源码分析

前言本文对lwip协议栈里UDP部分的源码进行分析。将源码中最关键部分提取出来，梳理UDP部分的设计框架。应用层例子首先举一个应用层使用UDP的简单例子，如下： //第一步：申请套接字 sock socket(AF_INET, SOCK_DGRAM, 0); //…...

编程日记 2025/7/26 20:03:51

Python Cookbook-7.10 在 MySQL 数据库中储存 BLOB

任务想把一个二进制的大对象(BLOB)存入MySQL数据库解决方案 MySQLdb 模块并不支持完整的占位符，不过可以使用模块的escape_string 函数来解决: import MySQLdb,cPickle #连接到数据库，用你的本机来测试数据库，并获得游标 connection = MySQLdb.connect(db = "tes…...

编程日记 2025/7/11 18:59:41

LWIP的ICMP协议

ICMP协议简介 ICMP协议是一个网络层协议背景：如果丢包了，IP协议并不能通知传输层是否丢包以及丢包的原因。因此我们需要ICMP协议来完成这样的功能为什么需要ICMP协议 1，IP 协议本身不提供差错报告和差错控制机制来保证数据报递交的有效…...

编程日记 2025/7/20 7:04:48

Spring Web MVC响应

返回静态页面第一步创建html时，要注意创建的路径，要在static下面第二步把需要写的内容写到body内第三步直接访问路径就可以返回数据ResponseBody RestController Controller ResponseBody Controller：返回视图 ResponseBody&…...

编程日记 2025/7/22 2:07:22

STM32智能窗帘系统：从零到一的开发实战

简介智能窗帘控制系统是智能家居领域的经典应用，随着物联网技术的不断发展，其功能从简单的远程控制演变为具备环境感知、多设备联动和跨平台兼容的智能系统。本篇文章将全面解析基于STM32的智能窗帘系统开发方案，从硬件设计到软件实现，再到企业级扩展功能，提供完整的代码…...

编程日记 2025/7/21 18:00:07

第三方评测机构如何凭借专业公正提供高可靠性软件检测服务？

第三方评测机构与软件开发及使用单位保持独立，凭借其专业技能和公正立场，为企业提供多样化的软件检测服务。这些检测结果的可靠性极高，不仅有助于企业减轻负担，节省人力和物力资源，而且赢得了业界的普遍认可。下面&…...

编程日记 2025/7/26 17:36:28

相或为K（位运算）蓝桥杯（JAVA）

这个题是相或为k，考察相或的性质，用俩个数举例子，011001和011101后面的数不管和哪个数相或都不可能变成前面的数，所以利用这个性质我们可以用相与运算来把和k对应位置的1都积累起来，看最后能不能拼起来k如果能拼起来k那…...

编程日记 2025/7/22 12:16:09

X.509证书详解

文章目录 1. X.509证书基础1.1 什么是X.509证书1.2 X.509证书结构1.3 证书编码格式2. Java中的X509Certificate2.1 类层次结构2.2 核心方法3. 获取X509Certificate对象3.1 从文件加载证书3.2 从KeyStore获取证书3.3 从HTTPS连接获取证书4. 创建自签名证书5. 证书验证5.1 基本验…...

编程日记 2025/7/27 0:40:44

深入浅出：Spring Boot 中 RestTemplate 的完整使用指南

在分布式系统开发中，服务间通信是常见需求。作为 Spring 框架的重要组件，RestTemplate 为开发者提供了简洁优雅的 HTTP 客户端解决方案。本文将从零开始讲解 RestTemplate 的核心用法，并附赠真实地图 API 对接案例。一、环境准备在 Spring…...

编程日记 2025/7/24 15:44:56

C++23 views::repeat (P2474R2) 写一篇博客

文章目录 std::views::enumerate 简介使用示例性能和灵活性与其他视图的结合使用总结 C23 标准引入了众多令人期待的新特性，其中 std::views::enumerate 便是一个备受瞩目的新增视图。这个新特性通过为迭代器提供索引和元素的组合，极大地简化了对集合中…...

编程日记 2025/7/25 22:39:06

微软向现实低头：悄悄延长Windows 10的Microsoft 365支持

快科技5月11日消息，Windows 10将在今年10月14日正式结束支持，此前微软曾明确表示，Microsoft 365（M365）应用，如Outlook、Teams、OneDrive、Word、Excel等，也将随之停止支持。不过无法升级至Win…...

编程日记 2025/7/23 22:24:52

数字化转型-4A架构之技术架构

4A架构系列文章数字化转型-4A架构（业务架构、应用架构、数据架构、技术架构） 数字化转型-4A架构之业务架构数字化转型-4A架构之应用架构数字化转型-4A架构之数据架构数字化转型-4A架构之技术架构一、技术架构 Technology Architecture 1. 技…...

编程日记 2025/7/27 6:53:08

生产级 Flink CDC 应用开发与部署：MySQL 到 Kafka 同步示例

生产级 Flink CDC 应用开发与部署：MySQL 到 Kafka 同步示例为了帮助你更好地理解如何将 Flink 作业部署为独立服务，下面我将提供一个完整的工程代码示例。这个例子基于之前的 MySQL 到 Kafka 的数据同步需求，但这次我们将 Flink 作业作为一个独立的服务进行打包和部署。 …...

编程日记 2025/7/27 1:21:53

【计算机视觉】OpenCV实战项目：Text-Extraction-Table-Image：基于OpenCV与OCR的表格图像文本提取系统深度解析

Text-Extraction-Table-Image：基于OpenCV与OCR的表格图像文本提取系统深度解析 1. 项目概述2. 技术原理与算法设计2.1 图像预处理流水线2.2 表格结构检测算法2.3 OCR优化策略 3. 实战部署指南3.1 环境配置3.2 核心代码解析3.3 执行流程示例 4. 常见问题与解决方案4.…...

编程日记 2025/7/27 5:24:07

TSN网络与DIOS融合：破解煤矿井下电力系统越级跳闸难题

一、引言 1.1 研究背景与意义在现代煤矿生产中，井下电力系统作为整个煤矿生产的动力核心，其重要性不言而喻。煤矿井下的各类机械设备，如采煤机、刮板输送机、通风机、排水泵等，都依赖稳定的电力供应才能正常运行。电力系统的稳定…...

编程日记 2025/7/24 16:27:06

ALLinSSL：一站式SSL证书管理解决方案

引言在当今互联网安全日益重要的背景下，SSL证书已成为保护网站安全的必备工具。然而，管理多个SSL证书常常是一项繁琐且容易出错的任务。ALLinSSL应运而生，它提供了一个一站式的SSL证书管理解决方案，大大简化了证书的申请、安装和更新过程。本文将深入介绍ALLinSSL的特性、…...

编程日记 2025/7/23 1:14:13

jsAPI

环境准备 1 安装nvm nvm 即 (node version manager)，好处是方便切换 node.js 版本安装注意事项要卸载掉现有的 nodejs提示选择 nvm 和 nodejs 目录时，一定要避免目录中出现空格选用【以管理员身份运行】cmd 程序来执行 nvm 命令首次运行前设置好国…...

编程日记 2025/7/26 19:02:37

三、c语言练习四题

在这个系列中，我将以每次五题的形式加强对C语言的理解 1、矩阵转置要求输入： 2 3 1 2 3 4 5 6输出： 1 4 2 5 3 6 //矩阵转置（复习） int main() {int i 0;int j 0;int arr[10][10];/*提前定义好一个大容量数…...

编程日记 2025/7/24 12:40:35

MySql（进阶）

一.数据库约束约束类型 NOT NULL - 指示某列不能存储 NULL 值。 (not null不能为NILL) UNIQUE - 保证某列的每行必须有唯一的值。 （unique唯一值） DEFAULT - 规定没有给列赋值时的默认值。 （default为空给定默认值） PRIMARY…...

编程日记 2025/7/26 12:59:42

数据结构练习：顺序表题目

今天我们来进行顺序表后面习题的练习目录移除数组思路1：查找后进行删除思路2：新数组交换： 思路3：双指针法： 删除重复项合并两个有序数组移除数组它的示例如下： 思路1：查找后进行删除…...

编程日记 2025/7/26 4:44:56

Ubuntu 22虚拟机【网络故障】快速解决指南

Ubuntu22虚拟机突然无法连接网络了，以下是故障排除步骤记录。 Ubuntu 22虚拟机网络故障快速解决指南当在虚拟机中安装的 Ubuntu 22 系统出现 ping: connect: 网络不可达和 ping: www.baidu.com: 域名解析出现暂时性错误的报错时，通常意味着虚拟机无法…...

编程日记 2025/7/22 19:04:13

SwaggerLogger.java

package further.config;import org.springframework.beans.factory.annotation.Value; import org.springframework.boot.CommandLineRunner; import org.springframework.context.annotation.Configuration; import org.springframework.util.StringUtils;/*** swagger启动ap…...

编程日记 2025/7/22 10:33:05