javascriptbabeljs

Is Babel still required in 2018?


I'm learning JavaScript right now and some said that after I learned HTML and CSS and vanilla Javascript I need to have the knowledge about ES6/ES2015. When I watch tutorials on Youtube it says that we need Babel or something like that for the browser to read it. So I'm wondering because that video is not that old (but still old). Is it still necessary to have Babel or I should skip this Babel thing?


Solution

  • Babel is a JavaScript-to-JavaScript compiler, sometimes called a transpiler, that converts code written with one set of features (for instance, those in ES2015 and later) into code that can be run in a JavaScript environment that doesn't support those features. (There are others, Babel is just one quite popular one.)

    Whether you use Babel to transpile your ES2015+ code to ES5 is entirely up to you, and depends on what target environments you want to support. If you want to support any version of Internet Explorer¹ (including IE11), for instance, you'll need to transpile. If you only need to support cutting-edge Chrome, Firefox, and Edge, or other environments where you can count on the features you're using being there (like up-to-date Node.js installations), you don't.

    Kangax has a set of handy tables for what JavaScript engines and/or browsers support which of the more modern features of JavaScript (not just ES2015, but ES2016, ES2017, etc.).

    Babel (and tools like it) are useful beyond just using the most-recently-standardized features, in at least two ways:

    1. You can use Babel (and similar) to take advantage of features that are likely to be standardized soon, even though they're not well-supported yet. For example, the basics of public class fields haven't changed in a long time, but the proposal they're in is still (as of this writing in June 2018) at Stage 3 (and has been back and forth between Stage 2 and Stage 3 a couple of times) for reasons unrelated to public class fields, and not even cutting-edge browsers like Chrome, Firefox, and Edge have support for public class fields yet. But it's common, these days, to use class fields via a transpiler.

    2. You can write your own Babel (or similar) transform to add your own features to JavaScript for your own project (or use ones other people have written), even if those features are never going to be part of JavaScript or used outside your project.


    ¹ Note: Internet Explorer is sunset as of June 15th 2022 in most versions of Windows. But there's an "Internet Explorer" mode in Microsoft Edge, and heaven help us, it actually removes features like template literals, for-of, etc. from the JavaScript environment in that mode.