關於@babel/preset-env以及useBuiltIns配置項

以最新版本 7.5.0爲準

安裝

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

運行時依賴安裝

@babel/polyfill 模塊包括 core-js 和一個自定義的 regenerator runtime 模塊

npm install --save @babel/polyfill

這個@babel/preset-env套餐幾乎能作一切事情，包括處理 polyfills：

this option configures how @babel/preset-env handles polyfills.

useBuiltIns: 'entry'
NOTE: Only use require("@babel/polyfill"); once in your whole app. Multiple imports or requires of @babel/polyfill will throw an error since it can cause global collisions and other issues that are hard to trace. We recommend creating a single entry file that only contains the require statement.

This option enables a new plugin that replaces the statement import "@babel/polyfill" or require("@babel/polyfill") with individual requires for @babel/polyfill based on environment.

npm install @babel/polyfill --save

Copy
In

import "@babel/polyfill";

Copy
Out (different based on environment)

import "core-js/modules/es7.string.pad-start";
import "core-js/modules/es7.string.pad-end";

Copy
This will also work for core-js directly (import "core-js"; or require('core-js');)

useBuiltIns 的 usage選項 轉換前

var b = new Map();

轉換後

import "core-js/modules/es.array.iterator";
import "core-js/modules/es.map";
import "core-js/modules/es.object.to-string";
import "core-js/modules/es.string.iterator";
import "core-js/modules/web.dom-collections.iterator";
var b = new Map();

useBuiltIns 的 entry選項,則不同了，須要在src源碼手動引入，轉換後只不過是打散了，這個有何用呢

轉換前

import "core-js/es/array";
import "core-js/proposals/math-extensions";
var b = new Map();

轉換後

import "core-js/modules/es.array.concat";
import "core-js/modules/es.array.copy-within";
import "core-js/modules/es.array.every";
import "core-js/modules/es.array.fill";
import "core-js/modules/es.array.filter";
import "core-js/modules/es.array.find";
import "core-js/modules/es.array.find-index";
import "core-js/modules/es.array.flat";
import "core-js/modules/es.array.flat-map";
import "core-js/modules/es.array.for-each";
import "core-js/modules/es.array.from";
import "core-js/modules/es.array.includes";
import "core-js/modules/es.array.index-of";
import "core-js/modules/es.array.is-array";
import "core-js/modules/es.array.iterator";
import "core-js/modules/es.array.join";
import "core-js/modules/es.array.last-index-of";
import "core-js/modules/es.array.map";
import "core-js/modules/es.array.of";
import "core-js/modules/es.array.reduce";
import "core-js/modules/es.array.reduce-right";
import "core-js/modules/es.array.reverse";
import "core-js/modules/es.array.slice";
import "core-js/modules/es.array.some";
import "core-js/modules/es.array.sort";
import "core-js/modules/es.array.species";
import "core-js/modules/es.array.splice";
import "core-js/modules/es.array.unscopables.flat";
import "core-js/modules/es.array.unscopables.flat-map";
import "core-js/modules/es.string.iterator";
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";
var b = new Map();

這麼雞肋的功能。。 或者是我理解錯了，沒有用對？

附帶：

babel不一樣的版本差異比較大，插件不能混用，最新版的presets 還得寫成 "@babel/env" 而不是 "env"