I'm writing ES6+ code and compiling it with Babel (currently using {stage: 0}
as my .babelrc
config).
So I'm compiling everything right down to ES5. But I'm exlusively targeting Chrome v47+, which supports some ES6+ features natively.
Which of the default Babel transformers can I blacklist (disable) and still have my code run in Chrome 47+?
Take a look at this page to see what features are fully implemented and enabled by default in Chrome and this page for the Babel transformers to which they correspond.
ES6 Feature Release Babel Transformer Spec. Compliant*
--------------------------------------------------------------------------------------
Rest Parameters | 47 | es6.parameters | ✔
Spread | 46 | es6.spread | ✔
Arrow Functions | 45 | es6.arrowFunctions | ✔
Extended Obj. Literals | 45 | es6.properties.shorthand/computed | ✘
Computed Prop. Names | 44 | es6.properties.shorthand/computed | ✘
Classes | 42 | es6.classes | ✘
Template Strings | 41 | es6.templateLiterals | ✘
Generators | 39 | regenerator | ✘
JS iterators | 38 | es6.forOf | ✘
Block bindings | 18 | es6.blockScoping/constants | ✘
*I have derived the column Spec. Compliant (re: Chrome not Babel) by looking at what draft of the specification the current implementation is based. For example 'Editor's Draft' -- I assume this means a potentially incomplete or incorrect implementation.
______
These are the dependencies that transformers have on each other that I have identified from the Babel source code:
Transformer Dependencies
--------------------------------------------
es7.classProperties | es6.classes
es7.decorators | es6.classes
es7.asyncFunctions | es6.classes
es7.objectRestSpread | es6.destructuring
______
It seems that no ES6 Babel transformer is dependent on another. So, any ES6 feature that is implemented in Chrome, and is spec. compliant, you no longer need to rely on Babel for. And these are: es6.parameters
, es6.spread
, and es6.arrowFunctions
.
It's currently not quite as simple as disabling transformers for features the environment supports, because some transformers have dependencies on others. For example, the es7.asyncFunctions
transformer depends on es6.classes
, even for environments where classes are natively supported. By "depends", I don't mean that es7.asyncFunctions
automatically invokes es6.classes
, I mean that es6.classes
has to be individually enabled (either explicitly or by not being blacklisted). See babel/babel#2415.
Possibly also of interest: babel/babel#2340.
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