5 ms·

One thing I never understood with Babel is which features are shimmed in the output JS and which features are re-implemented? What I means is: I didn't know ho

One thing I never understood with Babel is which features are shimmed in the output JS and which features are re-implemented? What I means is: I didn't know how to tell Babel which browsers I was targeting, and I'm pretty sure that some of their feature implementations do not feature test the platform before activating, since they were so compiled in. Is that the case? Also, do you have to tell TypeScript your target runtime for it to it to use it's ES3 async/await logic vs. it's ES2015 (which uses generators), or does it automatically figure it out?

hzoo 10y ago
You might be interested in https://github.com/babel/babel-preset-env https://github.com/babel/babel-preset-env :D. (I'm working on it so let me know if you have questions)
pimterry 10y ago
You do tell TypeScript which runtime you're targeting, and that's how it decides how to compile it. You either set `target` in your tsconfig.json, or you provide `--target` on the command line. Docs: https://www.typescriptlang.org/docs/handbook/compiler-options.html https://www.typescriptlang.org/docs/handbook/compiler-option...
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 ago
  Deduplication 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 ago
    Thanks for the link, this was something I was specifically waiting for release but haven't seen come across in the release notes.
- hzoo 10y ago
  There'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

hzoo 10y ago

You might be interested in https://github.com/babel/babel-preset-env https://github.com/babel/babel-preset-env :D. (I'm working on it so let me know if you have questions)

pimterry 10y ago

You do tell TypeScript which runtime you're targeting, and that's how it decides how to compile it. You either set `target` in your tsconfig.json, or you provide `--target` on the command line. Docs: https://www.typescriptlang.org/docs/handbook/compiler-options.html https://www.typescriptlang.org/docs/handbook/compiler-option...

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 ago
Deduplication 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 ago
  Thanks for the link, this was something I was specifically waiting for release but haven't seen come across in the release notes.
hzoo 10y ago
There'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