开源软件名称: tkrotoff/babel-preset-env-example开源软件地址: https://github.com/tkrotoff/babel-preset-env-example开源编程语言:
JavaScript
82.0%
开源软件介绍: @babel/preset-env example
With Babel 7
# .browserslistrc
> 1% in FR
// babel.config.js
module . exports = {
presets : [
[
'@babel/preset-env' ,
{
useBuiltIns : 'entry' ,
debug : true
}
]
]
} ;
// First line inside your app (App.js for this example)
// Not needed with useBuiltIns: 'usage'
//import '@babel/polyfill'
Findings
Specify a file .browserslistrc
instead of babel.config.js browsers: [...]
: will be reused by Autoprefixer and other tools
useBuiltIns: 'usage'
includes polyfills given .browserslistrc and your source code (Babel analyses it - might not always perfectly work depending on your app and its dependencies) instead of including everything from core-js
useBuiltIns: 'entry'
includes polyfills given .browserslistrc (safest option)
useBuiltIns: false
includes all polyfills, no use of .browserslistrc (not what you want)
Use useBuiltIns: 'entry'
+ import '@babel/polyfill'
or useBuiltIns: 'usage'
without import '@babel/polyfill'
Do not use last n versions
, prefer something like > 2% in US
, see https://github.com/browserslist/browserslist/tree/4.4.1#best-practices and https://jamie.build/last-2-versions
Do not write inside webpack.config.js entry: ['@babel/polyfill', './App.js']
as suggested here , use import '@babel/polyfill'
+ entry: './App.js'
Output
useBuiltIns: 'usage'
without import '@babel/polyfill'
Includes only the polyfills needed by .browserslistrc and your source code
Webpack output
$ yarn build:webpack:dev
...
build/App.js 145 KiB
...
Babel output
$ yarn build:babel
Using targets:
{
"chrome": "70",
"edge": "17",
"firefox": "63",
"ie": "11",
"ios": "11.3",
"safari": "12"
}
Using modules transform: auto
Using plugins:
transform-template-literals { "ie":"11" }
transform-literals { "ie":"11" }
transform-function-name { "edge":"17", "ie":"11" }
transform-arrow-functions { "ie":"11" }
transform-classes { "ie":"11" }
transform-object-super { "ie":"11" }
transform-shorthand-properties { "ie":"11" }
transform-duplicate-keys { "ie":"11" }
transform-computed-properties { "ie":"11" }
transform-for-of { "ie":"11" }
transform-sticky-regex { "ie":"11" }
transform-dotall-regex { "edge":"17", "firefox":"63", "ie":"11" }
transform-unicode-regex { "ie":"11", "ios":"11.3" }
transform-spread { "ie":"11" }
transform-parameters { "edge":"17", "ie":"11" }
transform-destructuring { "edge":"17", "ie":"11" }
transform-block-scoping { "ie":"11" }
transform-typeof-symbol { "ie":"11" }
transform-new-target { "ie":"11" }
transform-regenerator { "ie":"11" }
transform-exponentiation-operator { "ie":"11" }
transform-async-to-generator { "ie":"11" }
proposal-async-generator-functions { "edge":"17", "ie":"11", "ios":"11.3" }
proposal-object-rest-spread { "edge":"17", "ie":"11" }
proposal-unicode-property-regex { "edge":"17", "firefox":"63", "ie":"11" }
proposal-json-strings { "edge":"17", "ie":"11", "ios":"11.3" }
proposal-optional-catch-binding { "edge":"17", "ie":"11" }
transform-named-capturing-groups-regex { "edge":"17", "firefox":"63", "ie":"11" }
Using polyfills with `usage` option:
[babel-preset-env-example/App.js] Added following polyfills:
es6.object.assign { "ie":"11" }
es6.promise { "ie":"11" }
Done in 0.39s.
build/App.js
"use strict" ;
require ( "core-js/modules/es6.promise" ) ;
require ( "core-js/modules/es6.object.assign" ) ;
require ( "./index.html" ) ;
// Not needed with useBuiltIns: 'usage'
//import '@babel/polyfill';
// Example taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
var object1 = {
a : 1 ,
b : 2 ,
c : 3
} ;
var object2 = Object . assign ( {
c : 4 ,
d : 5
} , object1 ) ;
console . log ( object2 . c , object2 . d ) ; // Example taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
var promise1 = new Promise ( function ( resolve , reject ) {
setTimeout ( resolve , 100 , 'foo' ) ;
} ) ;
console . log ( promise1 ) ;
useBuiltIns: 'entry'
+ import '@babel/polyfill'
Includes polyfills given .browserslistrc
Webpack output
$ yarn build:webpack:dev
...
build/App.js 806 KiB
...
Babel output
$ yarn build:babel
Using targets:
{
"chrome": "70",
"edge": "17",
"firefox": "63",
"ie": "11",
"ios": "11.3",
"safari": "12"
}
Using modules transform: auto
Using plugins:
transform-template-literals { "ie":"11" }
transform-literals { "ie":"11" }
transform-function-name { "edge":"17", "ie":"11" }
transform-arrow-functions { "ie":"11" }
transform-classes { "ie":"11" }
transform-object-super { "ie":"11" }
transform-shorthand-properties { "ie":"11" }
transform-duplicate-keys { "ie":"11" }
transform-computed-properties { "ie":"11" }
transform-for-of { "ie":"11" }
transform-sticky-regex { "ie":"11" }
transform-dotall-regex { "edge":"17", "firefox":"63", "ie":"11" }
transform-unicode-regex { "ie":"11", "ios":"11.3" }
transform-spread { "ie":"11" }
transform-parameters { "edge":"17", "ie":"11" }
transform-destructuring { "edge":"17", "ie":"11" }
transform-block-scoping { "ie":"11" }
transform-typeof-symbol { "ie":"11" }
transform-new-target { "ie":"11" }
transform-regenerator { "ie":"11" }
transform-exponentiation-operator { "ie":"11" }
transform-async-to-generator { "ie":"11" }
proposal-async-generator-functions { "edge":"17", "ie":"11", "ios":"11.3" }
proposal-object-rest-spread { "edge":"17", "ie":"11" }
proposal-unicode-property-regex { "edge":"17", "firefox":"63", "ie":"11" }
proposal-json-strings { "edge":"17", "ie":"11", "ios":"11.3" }
proposal-optional-catch-binding { "edge":"17", "ie":"11" }
transform-named-capturing-groups-regex { "edge":"17", "firefox":"63", "ie":"11" }
Using polyfills with `entry` option:
[babel-preset-env-example/App.js] Replaced `@babel/polyfill` with the following polyfills:
es6.array.copy-within { "ie":"11" }
es6.array.fill { "ie":"11" }
es6.array.find { "ie":"11" }
es6.array.find-index { "ie":"11" }
es6.array.from { "ie":"11" }
es7.array.includes { "ie":"11" }
es6.array.iterator { "ie":"11" }
es6.array.of { "ie":"11" }
es6.array.species { "ie":"11" }
es6.date.to-primitive { "ie":"11" }
es6.function.has-instance { "ie":"11" }
es6.function.name { "ie":"11" }
es6.map { "ie":"11" }
es6.math.acosh { "ie":"11" }
es6.math.asinh { "ie":"11" }
es6.math.atanh { "ie":"11" }
es6.math.cbrt { "ie":"11" }
es6.math.clz32 { "ie":"11" }
es6.math.cosh { "ie":"11" }
es6.math.expm1 { "ie":"11" }
es6.math.fround { "ie":"11" }
es6.math.hypot { "ie":"11" }
es6.math.imul { "ie":"11" }
es6.math.log1p { "ie":"11" }
es6.math.log10 { "ie":"11" }
es6.math.log2 { "ie":"11" }
es6.math.sign { "ie":"11" }
es6.math.sinh { "ie":"11" }
es6.math.tanh { "ie":"11" }
es6.math.trunc { "ie":"11" }
es6.number.constructor { "ie":"11" }
es6.number.epsilon { "ie":"11" }
es6.number.is-finite { "ie":"11" }
es6.number.is-integer { "ie":"11" }
es6.number.is-nan { "ie":"11" }
es6.number.is-safe-integer { "ie":"11" }
es6.number.max-safe-integer { "ie":"11" }
es6.number.min-safe-integer { "ie":"11" }
es6.number.parse-float { "ie":"11" }
es6.number.parse-int { "ie":"11" }
es6.object.assign { "ie":"11" }
es7.object.define-getter { "ie":"11" }
es7.object.define-setter { "ie":"11" }
es7.object.entries { "ie":"11" }
es6.object.freeze { "ie":"11" }
es6.object.get-own-property-descriptor { "ie":"11" }
es7.object.get-own-property-descriptors { "ie":"11" }
es6.object.get-own-property-names { "ie":"11" }
es6.object.get-prototype-of { "ie":"11" }
es7.object.lookup-getter { "edge":"17", "ie":"11" }
es7.object.lookup-setter { "edge":"17", "ie":"11" }
es6.object.prevent-extensions { "ie":"11" }
es6.object.is { "ie":"11" }
es6.object.is-frozen { "ie":"11" }
es6.object.is-sealed { "ie":"11" }
es6.object.is-extensible { "ie":"11" }
es6.object.keys { "ie":"11" }
es6.object.seal { "ie":"11" }
es7.object.values { "ie":"11" }
es6.promise { "ie":"11" }
es7.promise.finally { "edge":"17", "ie":"11" }
es6.reflect.apply { "ie":"11" }
es6.reflect.construct { "ie":"11" }
es6.reflect.define-property { "ie":"11" }
es6.reflect.delete-property { "ie":"11" }
es6.reflect.get { "ie":"11" }
es6.reflect.get-own-property-descriptor { "ie":"11" }
es6.reflect.get-prototype-of { "ie":"11" }
es6.reflect.has { "ie":"11" }
es6.reflect.is-extensible { "ie":"11" }
es6.reflect.own-keys { "ie":"11" }
es6.reflect.prevent-extensions { "ie":"11" }
es6.reflect.set { "ie":"11" }
es6.reflect.set-prototype-of { "ie":"11" }
es6.regexp.constructor { "edge":"17", "ie":"11" }
es6.regexp.flags { "edge":"17", "ie":"11" }
es6.regexp.match { "edge":"17", "ie":"11" }
es6.regexp.replace { "edge":"17", "ie":"11" }
es6.regexp.split { "edge":"17", "ie":"11" }
es6.regexp.search { "edge":"17", "ie":"11" }
es6.regexp.to-string { "edge":"17", "ie":"11" }
es6.set { "ie":"11" }
es6.symbol { "edge":"17", "ie":"11" }
es7.symbol.async-iterator { "edge":"17", "ie":"11", "ios":"11.3" }
es6.string.anchor { "ie":"11" }
es6.string.big { "ie":"11" }
es6.string.blink { "ie":"11" }
es6.string.bold { "ie":"11" }
es6.string.code-point-at { "ie":"11" }
es6.string.ends-with { "ie":"11" }
es6.string.fixed { "ie":"11" }
es6.string.fontcolor { "ie":"11" }
es6.string.fontsize { "ie":"11" }
es6.string.from-code-point { "ie":"11" }
es6.string.includes { "ie":"11" }
es6.string.italics { "ie":"11" }
es6.string.iterator { "ie":"11" }
es6.string.link { "ie":"11" }
es7.string.pad-start { "ie":"11" }
es7.string.pad-end { "ie":"11" }
es6.string.raw { "ie":"11" }
es6.string.repeat { "ie":"11" }
es6.string.small { "ie":"11" }
es6.string.starts-with { "ie":"11" }
es6.string.strike { "ie":"11" }
es6.string.sub { "ie":"11" }
es6.string.sup { "ie":"11" }
es6.typed.array-buffer { "ie":"11" }
es6.typed.int8-array { "ie":"11" }
es6.typed.uint8-array { "ie":"11" }
es6.typed.uint8-clamped-array { "ie":"11" }
es6.typed.int16-array { "ie":"11" }
es6.typed.uint16-array { "ie":"11" }
es6.typed.int32-array { "ie":"11" }
es6.typed.uint32-array { "ie":"11" }
es6.typed.float32-array { "ie":"11" }
es6.typed.float64-array { "ie":"11" }
es6.weak-map { "ie":"11" }
es6.weak-set { "ie":"11" }
web.timers { "chrome":"70", "edge":"17", "firefox":"63", "ie":"11", "ios":"11.3", "safari":"12" }
web.immediate { "chrome":"70", "edge":"17", "firefox":"63", "ie":"11", "ios":"11.3", "safari":"12" }
web.dom.iterable { "chrome":"70", "edge":"17", "firefox":"63", "ie":"11", "ios":"11.3", "safari":"12" }
Done in 0.43s.
build/App.js
"use strict" ;
require ( "core-js/modules/es6.array.copy-within" ) ;
require ( "core-js/modules/es6.array.fill" ) ;
require ( "core-js/modules/es6.array.find" ) ;
require ( "core-js/modules/es6.array.find-index" ) ;
require ( "core-js/modules/es6.array.from" ) ;
require ( "core-js/modules/es7.array.includes" ) ;
require ( "core-js/modules/es6.array.iterator" ) ;
require ( "core-js/modules/es6.array.of" ) ;
require ( "core-js/modules/es6.array.species" ) ;
require ( "core-js/modules/es6.date.to-primitive" ) ;
require ( "core-js/modules/es6.function.has-instance" ) ;
require ( "core-js/modules/es6.function.name" ) ;
require ( "core-js/modules/es6.map" ) ;
require ( "core-js/modules/es6.math.acosh" ) ;
require ( "core-js/modules/es6.math.asinh" ) ;
require ( "core-js/modules/es6.math.atanh" ) ;
require ( "core-js/modules/es6.math.cbrt" ) ;
require ( "core-js/modules/es6.math.clz32" ) ;
require ( "core-js/modules/es6.math.cosh" ) ;
require ( "core-js/modules/es6.math.expm1" ) ;
require ( "core-js/modules/es6.math.fround" ) ;
require ( "core-js/modules/es6.math.hypot" ) ;
require ( "core-js/modules/es6.math.imul" ) ;
require ( "core-js/modules/es6.math.log1p" ) ;
require ( "core-js/modules/es6.math.log10" ) ;
require ( "core-js/modules/es6.math.log2" ) ;
require ( "core-js/modules/es6.math.sign" ) ;
require ( "core-js/modules/es6.math.sinh" ) ;
require ( "core-js/modules/es6.math.tanh" ) ;
require ( "core-js/modules/es6.math.trunc" ) ;
require ( "core-js/modules/es6.number.constructor" ) ;
require ( "core-js/modules/es6.number.epsilon" ) ;
require ( "core-js/modules/es6.number.is-finite" ) ;
require ( "core-js/modules/es6.number.is-integer" ) ;
require ( "core-js/modules/es6.number.is-nan" ) ;
require ( "core-js/modules/es6.number.is-safe-integer" ) ;
require ( "core-js/modules/es6.number.max-safe-integer" ) ;
require ( "core-js/modules/es6.number.min-safe-integer" ) ;
require ( "core-js/modules/es6.number.parse-float" ) ;
require ( "core-js/modules/es6.number.parse-int" ) ;
require ( "core-js/modules/es6.object.assign" ) ;
require ( "core-js/modules/es7.object.define-getter" ) ;
require ( "core-js/modules/es7.object.define-setter" ) ;
require ( "core-js/modules/es7.object.entries" ) ;
require ( "core-js/modules/es6.object.freeze" ) ;
require ( "core-js/modules/es6.object.get-own-property-descriptor" ) ;
require ( "core-js/modules/es7.object.get-own-property-descriptors" ) ;
require ( "core-js/modules/es6.object.get-own-property-names" ) ;
require ( "core-js/modules/es6.object.get-prototype-of" ) ;
require ( "core-js/modules/es7.object.lookup-getter" ) ;
require ( "core-js/modules/es7.object.lookup-setter" ) ;
require ( "core-js/modules/es6.object.prevent-extensions" ) ;
require ( "core-js/modules/es6.object.is" ) ;
require ( "core-js/modules/es6.object.is-frozen" ) ;
require ( "core-js/modules/es6.object.is-sealed" ) ;
require ( "core-js/modules/es6.object.is-extensible" ) ;
require ( "core-js/modules/es6.object.keys" ) ;
require ( "core-js/modules/es6.object.seal" ) ;
require ( "core-js/modules/es7.object.values" ) ;
require ( "core-js/modules/es6.promise" ) ;
require ( "core-js/modules/es7.promise.finally" ) ;
require ( "core-js/modules/es6.reflect.apply" ) ;
require ( "core-js/modules/es6.reflect.construct" ) ;
require ( "core-js/modules/es6.reflect.define-property" ) ;
require ( "core-js/modules/es6.reflect.delete-property" ) ;
require ( "core-js/modules/es6.reflect.get" ) ;
require ( "core-js/modules/es6.reflect.get-own-property-descriptor" ) ;
require ( "core-js/modules/es6.reflect.get-prototype-of" ) ;
require ( "core-js/modules/es6.reflect.has" ) ;
require ( "core-js/modules/es6.reflect.is-extensible" ) ;
require ( "core-js/modules/es6.reflect.own-keys" ) ;
require ( "core-js/modules/es6.reflect.prevent-extensions" ) ;
require ( "core-js/modules/es6.reflect.set" ) ;
require ( "core-js/modules/es6.reflect.set-prototype-of" ) ;
require ( "core-js/modules/es6.regexp.constructor" ) ;
require ( "core-js/modules/es6.regexp.flags" ) ;
require ( "core-js/modules/es6.regexp.match" ) ;
require ( "core-js/modules/es6.regexp.replace" ) ;
require ( "core-js/modules/es6.regexp.split" ) ;
require ( "core-js/modules/es6.regexp.search" ) ;
require ( "core-js/modules/es6.regexp.to-string" ) ;
require ( "core-js/modules/es6.set" ) ;
require ( "core-js/modules/es6.symbol" ) ;
require ( "core-js/modules/es7.symbol.async-iterator" ) ;
require ( "core-js/modules/es6.string.anchor" ) ;
require ( "core-js/modules/es6.string.big" ) ;
require ( "core-js/modules/es6.string.blink" ) ;
require ( "core-js/modules/es6.string.bold" ) ;
require ( "core-js/modules/es6.string.code-point-at" ) ;
require ( "core-js/modules/es6.string.ends-with" ) ;
require ( "core-js/modules/es6.string.fixed" ) ;
require ( "core-js/modules/es6.string.fontcolor" ) ;
require ( "core-js/modules/es6.string.fontsize" ) ;
require ( "core-js/modules/es6.string.from-code-point" ) ;
require ( "core-js/modules/es6.string.includes" ) ;
require ( "core-js/modules/es6.string.italics" ) ;
require ( "core-js/modules/es6.string.iterator" ) ;
require ( "core-js/modules/es6.string.link" ) ;
require ( "core-js/modules/es7.string.pad-start" ) ;
require ( "core-js/modules/es7.string.pad-end" ) ;
require ( "core-js/modules/es6.string.raw" ) ;
require ( "core-js/modules/es6.string.repeat" ) ;
require ( "core-js/modules/es6.string.small" ) ;
require ( "core-js/modules/es6.string.starts-with" ) ;
require ( "core-js/modules/es6.string.strike" ) ;
require ( "core-js/modules/es6.string.sub" ) ;
require ( "core-js/modules/es6.string.sup" ) ;
require ( "core-js/modules/es6.typed.array-buffer"
请发表评论