80347968 2019-11-03
以最新版本 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"