3 ms·
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 your
by mhink 10y ago
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 = _extends({ 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-details http://babeljs.io/docs/plugins/transform-runtime/#technical-...
2: https://facebook.github.io/regenerator/ https://facebook.github.io/regenerator/
3: https://github.com/zloirock/core-js https://github.com/zloirock/core-js
4: https://github.com/babel/babel-preset-env https://github.com/babel/babel-preset-env
- frankwallis 10y agoDeduplication of helper methods is now available in typescript too, using the 'importHelpers' compiler option. It will automatically add import statements to include the helpers from the 'tslib' package, see https://github.com/Microsoft/tslib https://github.com/Microsoft/tslib
- WorldMaker 10y agoThanks for the link, this was something I was specifically waiting for release but haven't seen come across in the release notes.
- hzoo 10y agoThere's actually a useBuiltins option to remove the _extends helper if you want to use that. https://babeljs.io/docs/plugins/transform-object-rest-spread/#options https://babeljs.io/docs/plugins/transform-object-rest-spread... Might be cool in combination with preset-env