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 还支持:
标签: react javascript java js node.js json node typescript npm 浏览
还木有评论哦,快来抢沙发吧~