Babel 是什么?


Babel 是一个 JavaScript 编译器

Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情:

  • 语法转换
  • 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
  • 源码转换 (codemods)
  • 更多! (查看这些 视频 获得启发)
 js
// Babel 输入: ES2015 箭头函数
[1, 2, 3].map((n) => n + 1);

// Babel 输出: ES5 语法实现的同等功能
[1, 2, 3].map(function(n) {
  return n + 1;
});

有关编译器的精彩教程,请查看 the-super-tiny-compiler 项目,它还高屋建瓴地解释了 Babel 的工作方式。

ES2015 及更新版本

Babel 通过语法转换器来支持新版本的 JavaScript 语法。

这些 插件 让你现在就能使用新的语法,无需等待浏览器的支持。查看 使用指南 开始入门吧。

Js中文网 – 前端进阶资源教程 www.javascriptC.com ,Babel中文文档
一个致力于帮助开发者用代码改变世界为使命的平台

JSX 与 React

Babel 能够转换 JSX 语法!查看 React preset 了解更多信息。通过和 babel-sublime 一起使用还可以把语法高亮的功能提升到一个新的水平。

通过以下命令安装此 preset

 shell
npm install --save-dev @babel/preset-react

并将 code>@babel/preset-react</code 添加到你的 Babel 配置文件中。

 jsx
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>;
  }
});

了解更多关于 JSX 的信息。

类型注释 (Flow 和 TypeScript)

Babel 可以删除类型注释!查看 Flow presetTypeScript preset 了解如何使用。务必牢记 Babel 不做类型检查,你仍然需要安装 Flow 或 TypeScript 来执行类型检查的工作。

通过以下命令安装 flow preset

 shell
npm install --save-dev @babel/preset-flow
 js
// @flow
function square(n: number): number {
  return n * n;
}

Js中文网 – 前端进阶资源教程 www.javascriptC.com ,Babel中文文档
一个致力于帮助开发者用代码改变世界为使命的平台

或通过以下命令安装 typescript preset

 shell
npm install --save-dev @babel/preset-typescript
 js
function Greeter(greeting: string) {
    this.greeting = greeting;
}

了解更多关于 FlowTypeScript 的信息

插件化

Babel 构建在插件之上。使用现有的或者自己编写的插件可以组成一个转换管道。通过使用或创建一个 preset 即可轻松使用一组插件。 了解更多 →

利用 astexplorer.net 可以立即创建一个插件,或者使用 generator-babel-plugin 生成一个插件模板。

 javascript
// 一个插件就是一个函数
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" 选项,用以在特定的转换情况下在符合规范、文件大小和速度之间做折中。

使用指南 →

来源:Js中文网 – 前端进阶资源教程
链接:https://www.javascriptc.com/docs/babel-manual/

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界