babel

Babel 是一个通用的多用途 JavaScript 编译器。通过 Babel 你可以使用(并创建)下一代的 JavaScript,以及下一代的 JavaScript 工具。 作为一种语言,JavaScript 在不断发展,新的标准/提案和新的特性层出不穷。 在得到广泛普及之前,Babel 能够让你提前(甚至数年)使用它们。

Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译, 也被称为转换编译(transpiling,是一个自造合成词,即转换+编译。以下也简称为转译)。 Babel 的用途并不止于此,它支持语法扩展,能支持像 React 所用的 JSX 语法,同时还支持用于静态类型检查的流式语法(Flow Syntax)。

# 安装
npm install --global babel-cli

npm install --save-dev babel-register

npm install babel-core

npm install --save babel-polyfill

npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime

直接使用:

  • babel-register 入口文件 register.js 引入 babel-register,就可以直接运行 node register.js,不适用正式环境
  • babel-core 以编程的方式来使用 Babel,可以直接将源码转换成目标代码和 AST,或者从 AST 转换

如何配置

babel 只是一个编译器,我们需要配置插件或者 preset 来告诉 babel 来做什么。

在根目录下面添加 .babelrc 文件

{
  "presets": [
      "es2015",
      "react",
      "stage-2"
  ],
  "plugins": [
      "transform-runtime",
      ["transform-es2015-classes", { "loose": true }]
  ],
  "env": {
     "development": {
       "plugins": [...]
     },
     "production": {
       "plugins": [...]
  }
}

preset 是什么

preset 是一系列插件的集合,如 preset es2015 就包含了插件 transform-es2015-classes,插件也可以配置参数。 可以基于环境配置不同的插件。

常用的 preset:

  • babel-preset-es2015 将 ES6 语法编译成 ES5 语法
  • babel-preset-react 编译 react 语法
  • babel-preset-stage-x

    • babel-preset-stage-0
    • babel-preset-stage-1
    • babel-preset-stage-2
    • babel-preset-stage-3

      JavaScript 还有一些提案,正在积极通过 TC39(ECMAScript 标准背后的技术委员会)的流程成为标准的一部分。这个流程分为 5(0-4)个阶段。 随着提案得到越多的关注就越有可能被标准采纳,于是他们就继续通过各个阶段,最终在阶段 4 被标准正式采纳

babel-polyfill

Babel 几乎可以编译所有时新的 JavaScript 语法,但对于 APIs 来说却并非如此。

function addAll() {
  return Array.from(arguments).reduce((a, b) => a + b);
}

如 babel 能将箭头函数编译成 function 的形式,但是不能编译新的 api 如 Array.from

为了解决这个问题,我们使用一种叫做 Polyfill(代码填充,也可译作兼容性补丁) 的技术。 简单地说,polyfill 即是在当前运行环境中用来复制(意指模拟性的复制,而不是拷贝)尚不存在的原生 api 的代码。 能让你提前使用还不可用的 APIs,Array.from 就是一个例子。

Babel 用了优秀的 core-js 用作 polyfill,并且还有定制化的 regenerator 来让 generators(生成器)和 async functions(异步函数)正常工作。

安装:

npm install --save babel-polyfill

使用:

// 在文件顶部导入
import "babel-polyfill";

Polyfill 是什么

Poly meaning it could be solved using any number of techniques - it wasn't limited to just being done using JavaScript, and fill would fill the hole in the browser where the technology needed to be. Ployfilla is a UK product known as Spackling Paste in the US. think of the browsers as a wall with cracks in it. These polyfills help smooth out the cracks and give us a nice smooth wall of browsers to work with.

core-js 是什么

  • 它是JavaScript标准库的polyfill
  • 它尽可能的进行模块化,让你能选择你需要的功能
  • 它可以不污染全局空间
  • 它和babel高度集成,可以对core-js的引入进行最大程度的优化

babel-runtime

为了实现 ECMAScript 规范的细节,Babel 会使用“助手”方法来保持生成代码的整洁。 由于这些助手方法可能会特别长并且会被添加到每一个文件的顶部,因此你可以把它们统一移动到一个单一的“运行时(runtime)”中去。

其实就是将一些工具方法统一放到 babel-runtime 里面,然后编译之后的文件从 babel-runtime 来导入这些公用方法。

安装:

npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime

使用:

{
    "plugins": [
+     "transform-runtime",
      "transform-es2015-classes"
    ]
}

babel 和其他工具集成

编写 babel 插件

babel 的处理步骤:

  • 解析(parse),接收代码生成 AST
  • 转换(transform),接收 AST 并对其进行遍历,在此过程中对节点进行添加、更新及移除等操作。
    • 递归进行树形遍历 AST
  • 生成(generate),步骤把最终(经过一系列转换之后)的 AST 转换成字符串形式的代码,同时还会创建源码映射(source maps)。

  • 集成 eslint

参考

babel-handbook-cn

code

what is polyfill

Babel 插件手册

results matching ""

    No results matching ""