babel使用及其底层原理介绍
Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
日常使用
作用
- 语法转化，将es6+语法转化为es5
- Polyfill支持是指通过代码模拟实现旧版浏览器或环境中缺失的现代JavaScript API的技术手段
- 将jsx语法转化为js
使用
npm i @babel/cli@^7.27.2 @babel/core@^7.27.1
1.在src新建index.js
const add = (a, b) => {return a + b;
};
2.添加箭头函数转化插件
npm i @babel/plugin-transform-arrow-functions@^7.27.13.packjson.js
"scripts": {"build": "babel src -d dist"},4.babel.config.js
module.exports = {plugins:['@babel/plugin-transform-arrow-functions']
};5.执行命令npm run build
则可以在dist下面得到
babel提供了大量的插件，但是这样每个语法转化都要下载对应的插件很麻烦，所以babel提供了@babel/preset-env，这个预设集成了很多插件只需要安装这个就可以了，下面是关于babel预设的介绍
1. vue-cli创建的项目可以直接使用@vue/cli-plugin-babel
npm i @vue/cli-plugin-babel@~4.5.0
module.exports = {presets: ['@vue/cli-plugin-babel/preset']
}2.基础通用版
npm install --save-dev @babel/preset-env
module.exports = {presets: [['@babel/preset-env', { targets: { node: 'current' } }]],plugins: ['@vue/babel-plugin-jsx'],
};解释：
presets配置项
预设（presets）是一组预定义的插件集合，用于处理特定场景的转译需求。@babel/preset-env是一个智能预设，能根据目标环境（浏览器或 Node.js）自动确定需要转译的语法特性。{ targets: { node: 'current' } }表示转译后的代码要兼容当前运行的 Node.js 版本，不需要额外兼容更旧的 Node 版本。
plugins配置项
插件（plugins）用于处理特定的语法扩展或转译需求。@vue/babel-plugin-jsx是 Vue 官方提供的 Babel 插件，用于支持在 Vue 项目中使用 JSX 语法（类似 React 的 JSX 写法），让开发者可以用更灵活的方式编写 Vue 组件。
@vue/cli-plugin-babel/preset和@babel/preset-env区别
| 特性 | @vue/cli-plugin-babel/preset | @babel/preset-env |
|---|---|---|
| 本质 | Vue CLI 专用预设（基于 @babel/preset-env 扩展） | 基础通用预设（无框架依赖） |
| 适用项目 | Vue CLI 创建的 Vue 项目 | 所有 JS 项目（无框架限制） |
| 包含内容 | 内置 @babel/preset-env + Vue 专属配置 | 仅核心 JS 语法转译逻辑 |
| 配置复杂度 | 低（自动集成 Vue CLI 配置） | 高（需手动配置 targets 等参数） |
babel.config.json和babel.config.js区别
当你的 Babel 配置简单、固定且无动态逻辑时，适合用 babel.config.json
// babel.config.json
{"presets": ["@babel/preset-env"],"plugins": ["@babel/plugin-proposal-class-properties"]
}当你的配置需要动态逻辑或复杂处理时，必须用 babel.config.js（因为 JSON 不支持代码逻辑）
// babel.config.js
module.exports = (api) => {// 判断当前环境（开发/生产）const isProduction = api.env('production');return {presets: [['@babel/preset-env',{// 生产环境兼容更多旧浏览器，开发环境只兼容最新浏览器targets: isProduction ? '>0.25%, not dead' : 'last 1 chrome version'}]]};
};解释
当
isProduction为false（开发环境）时，targets设为'last 1 chrome version'：- 表示只需要兼容「最新版本的 Chrome 浏览器」。
- 开发环境不需要兼容太多旧浏览器，这样可以减少转译工作量，加快开发时的编译速度。
深入理解
babel底层原理
babel是核心通过解析 - 遍历转换 - 生成三个步骤实现的，通过parser解析成ast抽象语法树，然后通过traverse遍历转化，最后通过generator生成将ast转化回代码
npm i @babel/generator@^7.28.3 @babel/parser@^7.28.3 @babel/traverse@^7.28.3 packjson.json
"scripts": {"build": "node index.js"},src/index.js
const a=1
const b=2index.js
import parser from "@babel/parser";
import traverse from "@babel/traverse";
import generator from "@babel/generator";import fs from "node:fs";if (!fs.existsSync("./dist")) {fs.mkdirSync("./dist");
}
const codePath = "./src/index.js";
const destPath = "./dist/index.js";const code = fs.readFileSync(codePath, {encoding: "utf-8",
});// babel底层 先语法解析 生成ast（抽象语法树），然后遍历ast，按照一定规则查找需要转化的节点 最后生成解析代码// 1. 语法解析
const ast = parser.parse(code);
// console.log("ast", ast);// 2.游历ast
// 访问者模式
const visitor = {VariableDeclaration(path) {if (path.node.kind === "const" || path.node.kind === "let") {path.node.kind = "var";}},
};traverse.default(ast, visitor);// // 3. 生成代码
const result = generator.default(ast, {}, code);
console.log("result", result.code);fs.writeFileSync(destPath, result.code);