preset-env, core-js, browserslist究竟要怎么配置

如题这三个东西，相信很多人都见过，也都会用会配置，但要是让你说出个所以然来，恐怕还不是那么容易。

曾经的我，一边google一边配置，只要能用就万事大吉了，且每次google出来的似乎还跟上次的都有所不同，所以每次配置项目时，有差异的。然而却很少去深究为啥？为啥这样配也可以，那样配也可以，那到底怎样配置才是最佳的？

下面就来简单说说我的理解，不对的地方欢迎指正。

名称解释

preset-env

从名称看有个env，这里就是包含“环境”之意。

在preset-env出来之前，我们需要自己知道要用什么es6的特性，然后自己去babel的配置文件中加进去，如：

{
  "plugins": [
      "@babel/plugin-transform-arrow-functions",
      "@babel/plugin-transform-classes",
      "@babel/plugin-transform-spread",
      ...
  ]
} 

这样做非常繁琐，开发体验也不好。再后来，后来就出现了@babel/preset-env。

@babel/preset-env可以通过target属性配置一个目标环境，babel会根据环境来转换那些它不支持的语法，这样就不需要我们一个一个的去自己加入所要支持的es6特性。如

{
    "presets": [
        ["@babel/preset-env", {
            "target": {
                "browsers": ["last 2 versions", "ie >= 7"]
            }
        }]
    ]
} 

所以，@babel/preset-env的作用就是将常用的ES6特性放到一起了，然后添加一个可以配置的目标环境，它自己决定要转换那些ES6特性，这样开发体验就好很多。这样虽然不需要我们配置ES6特性，但需要我们自己配置目标环境，且这个环境只是babel自己知道，如果还有其他应用，如ESLint，TS等等，其他应用也需要读取目标环境来决定行为，还得配置……所以browserslist出现了。

browserslist

browserslist提供了一种项目共享的目标环境配置，整个项目的babel、eslint，ts等都可以读取到。如：

# Browsers that we support

[modern]
Firefox >= 53
Edge >= 15
Chrome >= 58
iOS >= 10.1

[legacy]
> 1% 

它有自己的配置语法，一看就会，它有多种具体文档：github.com/browserslis…

有了browserslist的配置，我们就可以不用配置@babel/preset-env的target了。browserslist的配置可以写在package.json里面也可以用独立的.browserslistrc文件。

core-js

相信很多人一开始并不清楚core-js是干嘛的，因为我们已经有babel了，为何还要core-js呢？如果你这么想，那就是有个关键的概念没有搞清楚。一般babel只是用来将ES6+的语法转为ES5，它并不处理ES6新增的API，如

const t = [1,2,3];
console.log(...t);
const x = t.includes(2);
console.log(x); 

转换后

"use strict";
var _console;
var t = [1, 2, 3];
(_c