A bit confused with Babel

A bit confused with Babel
0

#1

I’m reading Setting Up ES6, and I must admit, Babel is confusing as hell. I’ve been struggling with understanding it, to be honest. It seems they’ve made it way too complex to work with. I’m starting to think maybe it’s better to just write ES5 code to begin with and be done with it.

In particular, the author explains how to set up babel-external-helpers as a global variable in this section of the book. I did exactly as the author explained, but the transpiled code I got looked nothing like the author wrote. Setting up the external helpers as a global variable did absolutely nothing. The code I got didn’t make use of the babelHelpers variable as explained in the book.

This is beyond frustrating. I’ve been trying to get it to work for a good while now, but literally nothing is helping. I wish the author did the effort to explain it a bit further. Even Google isn’t helping.

Anyone can perhaps help? I can’t see what I’m doing wrong…

EDIT: @P1xt Maybe you could shed some light on this?


#4

Thank you so much for taking a look and for replying! Well, it turned out that I hadn’t removed the previous plugin from the package.json file, which was transform-runtime. Apparently it was “clashing” with the external-helpers plugin or something, as when I removed it the code worked as explained in the book. It was transpiled to the same code as in the book, but with an extra require("babelHelpers"); line at the top. Is this how it’s supposed to be or am I doing something else wrong?

I also had to create a new file via the command babel-external-helpers -t var > es6/babelHelpers.js. Was I supposed to do this or is this just an extra step? I mean since the babel-external-helpers command basically prints the external helpers code to the terminal, it made since to save the output to a file with same name as the one we’re importing.

Is it a bad thing if I find myself having to research a bit in the future when doing projects? I mean there’s no way to remember all of this stuff. So far I’ve had to research at least occasionally, but I’ve been able to find what I’m looking for really quickly, and most of the time using the official docs of whatever it is I’m stuck with. Is this considered bad? Should I be able to do this stuff without research instead?

Yeah, I know it’s not better, lol. I was just a bit frustrated when I made the thread, so I didn’t really mean it. Also I’ve just applied for the May cohorts, I’m hoping to get accepted.


#5

Not trying to hijack, but when running the build process I assume you would just use grunt or gulp to run the babel transpiling commands? (like when you run npm start or something)

That’s one of the reasons to use gulp or another task runner correct? (obviously nothing i’ve done has needed them yet haha)


#8

I’ll have to check it out. If someone’s finished the front end of freeCodeCamp do you think it’s “OK” for them to dive into this book? or should they read the ES6 book first? (and in that case is the ES5 book even worth reading if you’ve done all of the front end section and various projects?)


#10

Will sure do. Thanks!