Babel 相关知识点摘录

一、 存在形式主要有

1. .babelrc
2. .babelrc.js
3. babel.config.js
4. package.json
5. 对于不同的构建工具，Babel也提供了相应的配置项，例如webpack的babel-loader的配置项，其本质和配置文件是一样的

对于.babelrc，它的配置是这样子

  {
    "presets": ["es2015", "react"],
    "plugins": ["transform-decorators-legacy", "transform-class-properties"]
  }

对于babel.config.js和.babelrc.js，它的配置是一样的，通过module.exports输出配置项

  module.exports = {
    "presets": ["es2015", "react"],
    "plugins": ["transform-decorators-legacy", "transform-class-properties"]
  }

对于package.json，就是在package.json中增加一个babel属性和值，它的配置是这样子

  {
    "name": "demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "babel": {
      "presets": ["es2015", "react"],
      "plugins": ["transform-decorators-legacy", "transform-class-properties"]
    }
  }

仔细观察上述几种配置文件，会发现它们的配置项其实都是 plugins 和 presets。

二、plugins & presets

1. 每个插件或预设都是一个npm包
2. 所谓Babel编译的规则：就是在配置文件里列出的编译过程中会用到的Babel插件或预设。 这些插件和预设会在编译过程中把ES6代码转换成ES5
3. presets 预设解决的问题是：Babel插件很多，假如只配置插件数组，前端工程要把编译ES2015,ES2016,ES2017…下的所有插件都写到配置项里，Babel配置文件会非常臃肿
4. presets 是一组Babel插件的集合，用大白话说就是插件包
5. presets 也可以是插件和其它预设的集合
6. Babel官方已经对常用的环境做了一些preset包：
   • @babel/preset-env
   • @babel/preset-react
   • @babel/preset-typescript
   • @babel/preset-stage-0
   • @babel/preset-stage-1 …
7. plugins插件数组和presets预设数组是有顺序要求的。如果两个插件或预设都要处理同一个代码片段，那么会根据插件和预设的顺序来执行。规则如下：
   • 插件比预设先执行
   • 插件执行顺序是插件数组从前向后执行
   • 预设执行顺序是预设数组从后向前执行
8. presets 和 plugins 的默认参数是字符串："presets": ["@babel/preset-env"]
9. 给插件或预设设置参数，那么成员项就不能写成字符串了，而要改写成一个数组，例如给@babel/preset-env设置参数：

  {
    "presets": [
      [
        "@babel/preset-env", //预设名称
        { //预设参数对象
          "useBuiltIns": "entry"
        }
      ]
    ]
  }

Babel 预设与插件的选择

Babel-polyfill

1. @babel/polyfill本质是由两个npm包 core-js 与 regenerator-runtime 组合而成的

@babel/preset-env

1. Babel6 时代，这个预设名字是 babel-preset-env；Babel7 之后，改成@babel/preset-env
2. browserslist 叫做目标环境配置表，除了写在package.json里，也可以单独写在工程目录下.browserslistrc文件里

 //配置含义是，目标环境是市场份额大于1%的浏览器并且不考虑IE8及一下的IE浏览器
 "browserslist": [ //
    "> 1%",
    "not ie <= 8"
  ]

3. @babel/preset-env可以通过browserslist针对目标环境不支持的语法进行语法转换
4. 如果@babel/preset-env不设置任何参数，Babel就会完全根据browserslist的配置来做语法转换。如果没有browserslist，那么Babel就会把所有ES6的语法转换成ES5版本。
5. Babel使用browserslist的配置功能依赖于@babel/preset-env，如果Babel没有配置任何预设或插件，那么Babel对转换的代码会不做任何处理，原封不动生成和转换前一样代码
6. 如果对@babel/preset-env的targets参数项进行了设置，那么就不使用browserslist的配置，而是使用targets的配置。如不设置targets，那么就使用browserslist的配置。如果targets不配置，browserslist也没有配置，那么@babel/preset-env就对所有ES6语法转换成ES5的