JS & 介绍 Babel 的使用及 presets & plugins 的概念

cookcyq

已于 2023-07-01 16:24:20 修改

阅读量3.2k

点赞数 3

分类专栏： JavaScript Vue 前端工具文章标签： javascript 前端

于 2023-06-17 17:43:08 首次发布

本文链接：https://blog.csdn.net/cookcyq__/article/details/131256924

版权

Babel是一个将新JavaScript语法编译成旧浏览器可执行代码的工具，支持ES6/7/8/9及TypeScript、React/Vue3的JSX语法。它包括核心库(@babel/core)、命令行工具(@babel/cli)和预设(@babel/preset-env)等组件。Babel通过配置文件（babel.config.json）管理插件(presets和plugins)，例如@babel/plugin-transform-arrow-functions用于转换箭头函数，@vue/babel-preset-jsx处理Vue的JSX语法。此外，Babel-loader与Webpack结合使用，实现代码编译。

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

一、Babel 是什么

Bebal 可以帮助我们将新 JS 语法编译为可执行且兼容旧浏览器版本的一款编译工具。
举个例子，ES6（编译前）：

const fn = () => {
   };

ES5（编译后）：

var fn = function() {
   }

二、Babel 的应用场景

想体验新 JS 语法带来的便捷和可读性，又希望能够向下兼容？Babel 可以帮你做到。
不仅如此，Babel 还支持解析 TS、JSX 等多种语法，给 ES6/7/8/9 Typescript、React / Vue3 JSX 等"语法糖"带来无限的可能。

三、Babel 的基本使用

3.1 准备工作

新建项目：babel-demo
初始化 npm
安装 Babel 相关依赖包

命令流程如下：

mkdir babel-demo && cd babel-demo && touch app.js
yarn init -y
yarn add @babel/core @babel/cli @babel/preset-env --dev

依赖包解释：

@babel/core 是 Babel 的编译核心工具。
@babel/cli 是 Babel 提供的脚手架，后面会用到并解释。
@babel/preset-env 集成了各种 plugin 插件，后面会用到并解释。

项目结构如下：
请添加图片描述

3.2 编译 JS

打开 app.js，添加如下代码：

const app = () => {
   
  const greeting = 'World' ?? 'Tony'
  console.log

最低0.47元/天解锁文章