javascript的Babel转译器有什么用_如何配置支持新语法-js教程-PHP中文网

javascript的Babel转译器有什么用_如何配置支持新语法

夜晨

发布： 2025-12-21 20:31:02

原创

100人浏览过

Babel 是将新标准 JS 语法（如 ES2020+、JSX、TypeScript）转译为旧版兼容代码（如 ES5）的编译器，不执行代码仅做语法转换；需安装核心包、配置 babel.config.json 指定 targets、添加 build 脚本；扩展支持需额外 preset/plugin，且不处理 polyfill。

javascript的babel转译器有什么用_如何配置支持新语法

Babel 是一个 JavaScript 编译器，核心作用是把**新标准的 JS 语法（如 ES2020+）和特性（如 JSX、TypeScript）转译成当前浏览器或运行环境能理解的旧版本代码（通常是 ES5）**，解决兼容性问题。它不执行代码，只做语法转换，比如把箭头函数 () => {} 变成 function() {}，把可选链 a?.b 变成安全判断逻辑。

为什么需要 Babel

现代 JS 新特性（如 let/const、模块化、装饰器、top-level await）在老版浏览器或某些 Node.js 版本中不被支持。Babel 让你用最新的写法开发，同时保证代码能在目标环境中正常运行。

基础配置三步走

以项目级配置为例（基于 Babel 7+）：

安装核心包：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
创建配置文件 babel.config.json（放在项目根目录）：
```
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not dead"]
      }
    }]
  ]
}
```
登录后复制
这表示：只转译那些在“全球使用率超 1%、主流浏览器最新两版、且未被厂商放弃”的环境中不支持的语法。
添加脚本命令到 package.json：
```
"scripts": {
  "build": "babel src --out-dir lib --extensions '.js,.jsx'"
}
```
登录后复制
运行 npm run build 就会把 src/ 下的 JS/JSX 文件编译输出到 lib/。

按需扩展支持其他语法

默认 @babel/preset-env 只处理标准 JS 语法。如果要用 React、TypeScript 或实验性功能，需额外加 preset 或 plugin：

灵光

蚂蚁集团推出的全模态AI助手

1635

查看详情

立即学习“Java免费学习笔记（深入）”；

React 开发：加 @babel/preset-react，支持 JSX 和 React 17+ 的自动运行时
TypeScript：加 @babel/preset-typescript（注意：Babel 不做类型检查，TS 类型需靠 tsc 或 IDE 处理）
装饰器、私有字段等 Stage 3 提案：启用对应 plugin，例如 @babel/plugin-proposal-decorators，并按规范设置 legacy: true 或 version: "2023-05"

配合构建工具更省心

单独用 CLI 较少，实际项目中常集成到 Webpack、Vite 或 Rollup 中：

Webpack：配 babel-loader，在 module.rules 中指定 JS 文件走 Babel 处理
Vite：默认已内置 Babel 支持（通过 esbuild 预构建 + 按需转译），只需在 babel.config.js 中声明 preset 即可生效
注意：Babel 不处理 polyfill（如 Promise、Array.from）。需要时用 @babel/polyfill（已废弃）或更推荐的 core-js + regenerator-runtime 手动导入