Today I learned about Javascript Polyfills and Transpilers.

While working through The Modern JavaScript Tutorial, I finally got a clear picture of what Polyfills and Transpilers are and how they are used in the Javascript ecosystem. For too long, I’ve seen these terms thrown around in the context of Javascript development, but I never really understood what they were or how they were used. I knew they had something to do with making sure your code works across different browsers, but I didn’t know how they did that.

Polyfills are scripts that add functions that don’t exist in older browsers. It fills in the gap in functionality that the browser doesn’t support. A couple popular polyfill libraries worth considering adding to your project are: core-js and polyfill.io.

Transpilers I’m familiar with, but usually I’ve seen them used to rewrite code from one language to another. In the context of Javascript, transpilers are (usually) tools that convert your modern Javascript into older versions of Javascript that are more widely supported across different browsers. The most popular transpiler for Javascript is Babel.

I’m interested to learn more about what the transpiled code looks like while debugging, as I’ve always found it a bit of an annoyance to debug transpiled code (GWT and RubyMotion being a couple of the worst offenders in my experience).