MHmhink·Dec 7, 2016
They're getting better at describing which features are shimmed, but the easiest way to check is by running a single plugin on a bit of code and seeing for yourself.
For instance, I decided just now to check if `transform-object-rest-spread` included an Object.assign polyfill (because spread syntax transpiles to Object.assign behind the scenes.)
With the following input:
var foo = { x: 1, y: 2 };
var bar = { a: 3, b: 4, ...foo };
var baz = new Promise(function(resolve, reject) {
resolve("quux");
});
I get the following output
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var foo = { x: 1, y: 2 };
var bar = _exte
Read the rest
nds({ a: 10, b: 11 }, foo);
var baz = new Promise(function(resolve, reject) {
resolve("quux");
});
The problem here, (to borrow phrasing from the docs) is that "Babel uses very small helpers for common functions such as _extend. By default this will be added to every file that requires it. This duplication is sometimes unnecessary, especially when your application is spread out over multiple files."
To solve this problem, many people use the `transform-runtime` plugin [1] as well. To put it shortly, it replaces inline helper functions (like _extends in the example above) with imports from an adapter module called 'babel-runtime', which itself exposes the relevant polyfills (regenerator[2] and core-js[3]).
With `transform-runtime`, I get the following:
import _Promise from "babel-runtime/core-js/promise";
import _extends from "babel-runtime/helpers/extends";
var foo = { x: 1, y: 2 };
var bar = _extends({ a: 10, b: 11 }, foo);
var baz = new _Promise(function (resolve, reject) {
resolve("foo");
});
Notice that the Promise implementation was polyfilled as well.
> I didn't know how to tell Babel which browsers I was targeting...
You might *really like babel-preset-env[4], a new project they just launched. Basically, you give it a set of browser targets (much like autoprefixer) and it works out exactly which plugins you need to support the latest (currently es2015, I think) version of javascript.
Hope that helps! Sorry for going on a Babel-related spiel in a Typescript thread, couldn't help myself. ;)
1: http://babeljs.io/docs/plugins/transform-runtime/#technical-...
2: https://facebook.github.io/regenerator/
3: https://github.com/zloirock/core-js
4: https://github.com/babel/babel-preset-env