Vue項目中的preset-env, core-js, browserslist是干嘛的

前言

如題這三個東西，相信很多人都見過，也都會用會配置，但要是讓你說出個所以然來，恐怕還不是那么容易。

曾經(jīng)的我，一邊google一邊配置，只要能用就萬事大吉了，且每次google出來的似乎還跟上次的都有所不同，所以每次配置項目時，有差異的。然而卻很少去深究為啥？為啥這樣配也可以，那樣配也可以，那到底怎樣配置才是最佳的？

下面就來簡單說說我的理解，不對的地方歡迎指正。

名稱解釋

preset-env

從名稱看有個env，這里就是包含“環(huán)境”之意。

在preset-env出來之前，我們需要自己知道要用什么es6的特性，然后自己去babel的配置文件中加進(jìn)去，如：

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

這樣做非常繁瑣，開發(fā)體驗也不好。再后來，后來就出現(xiàn)了@babel/preset-env。

@babel/preset-env可以通過target屬性配置一個目標(biāo)環(huán)境，babel會根據(jù)環(huán)境來轉(zhuǎn)換那些它不支持的語法，這樣就不需要我們一個一個的去自己加入所要支持的es6特性。如

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

所以，@babel/preset-env的作用就是將常用的ES6特性放到一起了，然后添加一個可以配置的目標(biāo)環(huán)境，它自己決定要轉(zhuǎn)換那些ES6特性，這樣開發(fā)體驗就好很多。這樣雖然不需要我們配置ES6特性，但需要我們自己配置目標(biāo)環(huán)境，且這個環(huán)境只是babel自己知道，如果還有其他應(yīng)用，如ESLint，TS等等，其他應(yīng)用也需要讀取目標(biāo)環(huán)境來決定行為，還得配置……所以browserslist出現(xiàn)了。

browserslist

browserslist提供了一種項目共享的目標(biāo)環(huán)境配置，整個項目的babel、eslint，ts等都可以讀取到。如：

# Browsers that we support

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

[legacy]
> 1%

它有自己的配置語法，一看就會，它有多種具體文檔：https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fbrowserslist%2Fbrowserslist

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

core-js

相信很多人一開始并不清楚core-js是干嘛的，因為我們已經(jīng)有babel了，為何還要core-js呢？如果你這么想，那就是有個關(guān)鍵的概念沒有搞清楚。一般babel只是用來將ES6+的語法轉(zhuǎn)為ES5，它并不處理ES6新增的API，如

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

轉(zhuǎn)換后

"use strict";
var _console;
var t = [1, 2, 3];
(_console = console).log.apply(_console, t);
var x = t.includes(2);
console.log(x);

上面的擴(kuò)展運算符是屬于語法的范疇，而數(shù)組的includes方法是屬于ES6新增的API，所以babel只是轉(zhuǎn)換了擴(kuò)展運算符，而并沒有處理includes方法。所以當(dāng)我們在比較老舊的瀏覽器中運行時會報錯，如何讓這些老舊的瀏覽器也能認(rèn)識ES6新增的這些API，這就是core-js要做的事情了。

一起使用

core-js提供了各種“老舊瀏覽器”需要的ES6新API的實現(xiàn)，browserslist提供了指定哪些“老舊瀏覽器”的功能，而@babel/preset-env提供了針對browserslist指定的老舊瀏覽器來轉(zhuǎn)換ES6到ES5，同時還能根據(jù)browserslist指定的環(huán)境從core-js中提取需要的ES6新增API的實現(xiàn)。簡單說@babel/preset-env使用core-js、browserslist通過適當(dāng)?shù)呐渲脕碇С指鞣N老舊的環(huán)境。

下面用一些簡單的代碼來演示如何一起使用，假設(shè)我們有如下index.js文件

init();

function init() {
    const p = new Map();
    const t = Object.entries({a:1,b:2})
    const y = [1,2,3].findIndex(x => x === 3);

    const t1 = new Promise((resolve) => {
        setTimeout(resolve, 1000, 3,2);
    });

    const obj = {
        maps: [p],
        printArr() {
            console.log(...t);
        },
        async p() {
            return t1;
        }
    };

    obj.printArr();
    obj.p().then(s => {console.log(s)});
}

.browserslistrc只指定ie11

ie 11

babel.config.json，指定usage方式引入core-js，以及指定使用的core-js版本

{
    "presets": [
        ["@babel/preset-env", {
            "useBuiltIns": "usage",
            "corejs": "3"
        }]
    ]
}

然后通過babel命令行轉(zhuǎn)譯

"use strict";
require("core-js/modules/es.symbol.js");
require("core-js/modules/es.symbol.description.js");
require("core-js/modules/es.symbol.iterator.js");
require("core-js/modules/es.array.from.js");
require("core-js/modules/es.array.slice.js");
require("core-js/modules/es.function.name.js");
require("core-js/modules/es.regexp.exec.js");
require("regenerator-runtime/runtime.js");
require("core-js/modules/es.array.iterator.js");
require("core-js/modules/es.map.js");
require("core-js/modules/es.object.to-string.js");
require("core-js/modules/es.string.iterator.js");
require("core-js/modules/web.dom-collections.iterator.js");
require("core-js/modules/es.object.entries.js");
require("core-js/modules/es.array.find-index.js");
require("core-js/modules/es.promise.js");

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

init();

function init() {
  var p = new Map();
  var t = Object.entries({
    a: 1,
    b: 2
  });
  var y = [1, 2, 3].findIndex(function (x) {
    return x === 3;
  });
  var t1 = new Promise(function (resolve) {
    setTimeout(resolve, 1000, 3, 2);
  });
  var obj = {
    maps: [p],
    printArr: function printArr() {
      var _console;

      (_console = console).log.apply(_console, _toConsumableArray(t));
    },
    p: function p() {
      return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
        return regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                return _context.abrupt("return", t1);

              case 1:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }))();
    }
  };
  obj.printArr();
  obj.p().then(function (s) {
    console.log(s);
  });
}

轉(zhuǎn)換后的代碼有點多，但這已經(jīng)是babel根據(jù)browserslist指定環(huán)境轉(zhuǎn)換的，我們可以看到babel提取了很多core-js中的實現(xiàn)，如：require("core-js/modules/es.array.from.js")等……，還有一些函數(shù)，如：_asyncToGenerator等我們稱為babel運行時(后面會說到)。要弄清楚轉(zhuǎn)譯后的文件為何這樣，我們得理解@babel/preset-env的配置項。

useBuiltIns

主要用于指定babel如何從core-js中提取合適的ES6新特性的實現(xiàn)，有兩種模式：

usage：我們不需要在入口處導(dǎo)入core-js，babel會根據(jù)代碼中使用的ES6 API來決定提取哪些。

entry：我們通過import在入口引入core-js，babel會根據(jù)引入的core-js模塊來識別和拆分更細(xì)的導(dǎo)入，如

// 源文件
import "core-js/es/array";
import "core-js/proposals/math-extensions";

// 輸出
import "core-js/modules/es.array.unscopables.flat";
import "core-js/modules/es.array.unscopables.flat-map";
import "core-js/modules/esnext.math.clamp";
import "core-js/modules/esnext.math.deg-per-rad";
import "core-js/modules/esnext.math.degrees";
import "core-js/modules/esnext.math.fscale";
import "core-js/modules/esnext.math.rad-per-deg";
import "core-js/modules/esnext.math.radians";
import "core-js/modules/esnext.math.scale";

corejs用于指定core-js的版本，因為core-js有2和3的版本，這里babel默認(rèn)會使用2的版本，這里建議用3的版本。babel還建議指定core-js的minor版本，這樣能將最新實現(xiàn)的API包含進(jìn)來。默認(rèn)情況下，babel只會提取穩(wěn)定的API實現(xiàn)，如果你想將還在提案階段的API也包含進(jìn)來，可以這樣配置：

{
    "corejs": { version: "3.8", proposals: true }
}

總的來說，useBuiltIns配置為usage，corejs配置為{ version: "3.8", proposals: true }會是大部分場景的選擇，不過后面還有更多的東西。。。

作者：生石灰 鏈接：https://juejin.cn/post/7088702716465119268