Babel 是将 ES2015+、TypeScript、JSX 等新语法转换为向后兼容旧语法（如 ES5）的 JavaScript 编译器，解决浏览器和 Node.js 对新特性支持滞后的问题；通过安装 CLI 与 preset-env、配置目标环境、执行编译命令实现转换，并可扩展支持 React、TypeScript、polyfill 及自定义插件。
Babel 是一个 JavaScript 编译器，主要作用是把用新标准写的代码（比如 ES2015+、TypeScript、JSX）转换成能在当前浏览器或 Node.js 环境中运行的向后兼容的旧语法（通常是 ES5）。
为什么需要 Babel？
浏览器和运行环境对新语法的支持有延迟。比如可选链 ?.、空值合并 ??、顶层 await、装饰器等，在老版本 Chrome 或某些 Node 版本里直接报错。Babel 提前帮你“翻译”好，让新写法也能跑起来。
怎么用 Babel 转换新语法？
核心是三步：安装工具、配置规则、执行转换。
安装 Babel CLI 和预设：npm install --save-dev @babel/core @babel/cli @babel/preset-env 创建配置文件 babel.config.json：
{ “presets”: [“@babel/preset-env”] }
这个 preset 会根据你指定的目标环境（如 Chrome 87、Node 14），自动决定哪些语法要转、哪些可以保留。 运行转换命令：npx babel src --out-dir lib
把 src/ 下所有 .js 文件编译输出到 lib/ 目录。
常见扩展用法
除了基础语法转换，Babel 还支持：
立即学习“Java免费学习笔记（深入）”；
React 开发：加 @babel/preset-react，把 JSX 编译成 React.createElement 调用； TypeScript 支持：用 @babel/preset-typescript 去掉类型注解（注意：它不校验类型，只删 TS 语法）； 按需 polyfill：配合 core-js 和 @babel/polyfill（已弃用）或 core-js/stable + regenerator-runtime，补全缺失的 API（如 Array.prototype.flat）； 自定义插件：比如用 @babel/plugin-proposal-optional-chaining 单独开启某个实验性特性。
基本上就这些。Babel 不复杂但容易忽略配置细节，关键是选对 preset、配好 targets、别漏掉 runtime 补丁。
以上就是javascript的babel是什么_如何转换新语法？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1541687.html
微信扫一扫 
支付宝扫一扫 
