Menu
I like how I can use http://browserl.ist/ to see what browsers the targets query will target in @babel/preset-env.
Is there any similar tools to list what Babel plugins (transforms etc.) the env preset actually includes?
I'm using Webpack as my bundler if it matters.
719
@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!
In Babel, a preset is a set of plugins used to support particular language features. The two presets Babel uses by default: es2015 : Adds support for ES2015 (or ES6) JavaScript. react : Adds support for JSX.
Using a Preset Within a Babel config, if the preset is on npm, you can pass in the name of the preset and Babel will check that it's installed in node_modules already. This is added to the presets config option, which takes an array. Otherwise, you can also specify a relative or absolute path to your presets.
Ordering matters for each visitor in the plugin. This means if two transforms both visit the "Program" node, the transforms will run in either plugin or preset order. Plugins run before Presets. Plugin ordering is first to last.
try add debug:true in @babel/preset-env options, it will list all plugin in use
{
"presets": [
[
"@babel/preset-env",
{
"debug": true,
"targets": {
"chrome": 49,
"firefox": 64,
"safari": 9,
"edge": 13,
"ios": 9
}
}
]
]
}
171
You can always check out the source for @babel/preset-env, namely the available-plugins.js file lists the available plugins in the preset.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
