Babel 介绍
Babel 是什么?Babel 是 JavaScript 编译器
Babel 是工具链,主要用于将 ECMAScript 2015+ 版本的为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情:
语法转换
通过 Polyfill 方式在目标环境中缺失的特性 (通过 @babel/polyfill 模块)
源码转换 (codemods)
// Babel 输入: ES2015 箭头 [1, 2, 3].map((n) => n + 1); // Babel : ES5 语法实现的同等 [1, 2, 3].map(function(n) { return n + 1; });
有关编译器的精彩教程,请查看 项目,它还高屋建瓴地解释了 Babel 的工作方式。
Library 的基本设置
安装 Babel 命令行工具(babel-cli)以及一种 Babel preset
npm install --save-dev babel-cli babel-preset-env
创建
{ "presets": ["env"] }
运行 src 中的并到夹中
./node_modules/.bin/babel src --out-dir lib
有关如何使用构建系统,IDE等设置 Babel 的更多信息,请查阅我们。
ES2015 及更新版本
Babel 通过语法转换器来新版本的 JavaScript 语法。
这些让你现在就能使用新的语法,无需等待浏览器的。
JSX 与 React
Babel 能够转换 JSX 语法!查看 React preset 了解更多信息。通过和 一起使用还可以把语法高亮的提升到新的水平。
通过以下命令安装此 preset
npm install --save-dev @babel/preset-react
并将 @babel/preset-react 到你的 Babel 中。
export default React.createClass({ getInitialState() { return { num: this.getRandomNumber() }; }, getRandomNumber() { return Math.ceil(Math.random() * 6); }, render() { return <div> Your dice roll: {this.state.num} </div>; } });
了解更多关于 的信息。
类型注释 (Flow 和 TypeScript)
Babel 可以类型注释!查看 Flow preset 或 TypeScript preset 了解如何使用。务必牢记 Babel 不做类型检查,你仍然需要安装 Flow 或 TypeScript 来执行类型检查的工作。
通过以下命令安装 flow preset
npm install --save-dev @babel/preset-flow
// @flow function square(n: number): number { return n * n; }
或通过以下命令安装 typescript preset
npm install --save-dev @babel/preset-typescript
function Greeter(greeting: string) { this.greeting = greeting; }
了解更多关于 和 的信息
化
Babel 构建在之上。使用现有的或者自己编写的可以组成转换管道。通过使用或创建 preset 即可轻松使用一组。
利用 可以立即创建,或者使用 模板。
// 就是 export default function ({types: t}) { return { visitor: { Identifier(path) { let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ path.node.name = name.split('').reverse().join(''); } } }; }
可调试
由于 Babel Source map,因此你可以轻松调试编译后的。
符合规范
Babel 尽最大可能遵循 ECMAScript 标准。不过,Babel 还提供了特定的选项来对标准和做权衡。
紧凑
Babel 尽可能用最少的并且不依赖太大量的运行环境。
有些情况是很难达成的这一愿望的,因此 Babel 提供了 "loose" 参数,用以在特定的转换情况下在符合规范、大小和速度之间做折中。