Is Babel still required in 2018? [closed]

Question

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?

Answer 1

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 IE (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.

Answer 2

Not to be off topic--as a beginner I recommend staying away from tooling and configurations. It can be overwhelming, especially in JS land. Just focus on learning, tooling will come later. You can start using ES6 right away without any tooling.

One way is to use an online REPL or playground. One tool I like is https://stackblitz.com this website let's you get a real feel for importing modules from npm to assist your code. If you are on Chrome, you can open the developer console and see the messages you send from the playground to the developer console.

https://developer.chrome.com/devtools

Here is a playground I made to get you started

https://stackblitz.com/edit/react-t3wxth?file=index.js