Babel 是一个 JavaScript 编译器

babel 默认只转换新的js语法，而不转换新的 API，，比如 Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol,Promise 等全局对象。以及一些在全局对象上的方法(比如 Object.assign)都不会转码。

基本知识：

  • babel 的作用是转换 JS 新的特性代码为大部分浏览器能运行的代码。
  • babel 转码又分为两部分，一个是语法转换，一个是 API 转换。
  • 对于 API 的转换又分为两部分，一个是全局 API 例如 Promise，Set，Map 还有静态方法 Object.assign，另一个是实例方法例如Array.prototype.includes。对于实例方法 core-js@2 是转换不了的，只有 core-js@3 才会转换。
  • babel 代码转换依赖 plugin，没有 plugin 的情况下 babel 做的事情只是 code => code。
  • plugin 有很多，一个个导入又特别麻烦，这时候我们又知道了preset

注意：preset 是从右往左执行，plugin 是从左往右执行，并且 plugin 先于 preset 执行

.babelrc配置介绍

主要对预设( presets )和插件( plugins )对配置。

1、plugins 告诉 babel 要使用哪些插件，控制如何转换代码。

如：babel-polyfill,babel-runtime,babel-transform-runtime等。

2、presets 属性告诉 Babel 要转换的源码使用了哪些新的语法特性，presets 是一组 Plugins 的集合。

如： babel-preset-env

babel-preset-env 相当于 babel-preset-latest 它会根据目标环境选择不支持的新特性来转译。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(1) 支持每个浏览器最后两个版本和 safari 大于等于 7 版本所需的 polyfill 代码转换，我们可以如下配置：
{
  'presets': [
    ['env', {
      'target': {
        'browsers': ['last 2 versions', 'safari >= 7']
      }
    }]
  ]
}
(2) 支持市场份额超过5%的浏览器，可以如下配置
{
  'presets': [
    ['env', {
      'target': {
        'browsers': '> 5%'
      }
    }]
  ]
}

Babel 入门教程