Babel在项目中的配置

平时做项目的时候，经常是用脚手架，或者照搬一些其他比较成熟的项目的配置和结构，以至于经常在配置出问题的时候花上很多时间去解决。

现在基于Babel7来看彻底学习一下相关的配置。

Babel的核心

官方文档解释：

Transform syntax
Polyfill features that are missing in your target environment (through @babel/polyfill)
Source code transformations (codemods)
And more! (check out these videos for inspiration)

转换语法、通过使用@babel/pplyfill来实现Polyfill、源代码转换。。。

Babel的预设presets和plugins

plugins在presets之前执行，且plugins的顺序是从左向右，而presets的执行顺序是从右向左。

基本的一些配置

@babel/core

核心，必须安装，作用是根据配置文件转换代码。配置文件要么就是.babelrc，要么是.babel.config.json。

Now, out of the box Babel doesn't do anything. It basically acts like const babel = code => code; by parsing the code and then generating the same code back out again. You will need to add plugins for Babel to do anything.

意思就是Babel啥也不做，要转换代码或者语法就要一个个装插件，比如ES2015中的箭头函数，需要插件@babel/plugin-transform-arrow-functions，解构需要@babel/plugin-transform-destructuring,需要转换的语法和API挺多的，总不能一个个安装，那么此时就用上presets了，可以理解为插件的集合，省得我们一个个去装。

官方有很多ES6的presets, 有preset-env：处理ES6+规范的语法集合，preset-stage: 尚未规范的集合，preset-react: 处理react的语法集合。。。

下面是一个.babel.config.js

{
    "presets": "preset-env"
}

通常情况下什么都不需要再配置，如果想做一些特殊配置也可以

{
    "presets": "preset-env"，{
        "target": "ie>=8"
    }
}

这个意思就是，只有IE8及以上版本不支持的语法才会被转换。

@babel/polyfill

这个也是必须要安装的，为啥呢。因为ES6的语法被转换了，但是新的API没有转换，像Promise在IE8肯定是不支持的，这时候就需要polyfill了，而且这个需要安装成 npm install @babel/polyfill -S 而不是 npm install @babel/polyfill -D,原因是啥呢，因为他需要在源代码之前运行，我们需要的是一个依赖项而不是开发依赖项

由于它比较大，想按需引入，就可以这样配置

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "useBuiltIns": "usage",
      "targets": "ie >= 8"
    }]
  ]    
}

useBuiltIns有两个值，usage和entry，假如是entry，会在入口处把所有ie8以上浏览器不支持api的polyfill引入进来，如果是usage,功能更强大，代码中用到哪个API需要转换，它才会把相关的polyfill引入进来。

@babel/runtime

有时候语法的转换相对复杂，可能需要一些helper函数，如转换es6的class，@babel/plugin-transform-runtime插件帮我们自动引入helper。我们首先安装@babel/runtime和@babel/plugin-transform-runtime：

@babel/plugin-transform-runtime -D

npm install @babel/runtime -S

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "useBuiltIns": "usage",
      "targets": "ie >= 8"
    }]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]  
}