NOTE: This post has not aged particularly well. This is made evident by the presence of the word "Gulp" present throughout the post.
Putting aside that whole server-side NodeJS thing or whatever it’s called, there’s years worth of mindfucks for those of us who fairly recently returned to dev. In our absence, the world has been Grunting, Gulping, Yarning and even NPMing. Let’s assume we’ve gotten past all of that... phew. Oh wait, I forgot to mention the monstrosity of “hey by way there’s this mess of a hardly-explained (protocol? organization? Fancy Github Repo?) called Babel that we all depend on to do meaningful shit in the browser these days.”
ECMAScript and the Backwards-Compatible Web
The problem is web browsers are inherently backward-compatible monstrosities. Most revenue-generating companies look at their >5% user base using Internet Explorer three and a half, and think “oh my god, that’s five percent of our potential revenue” (it isn’t, but whatever). That’s where we stand.
New features? For the INTERNET?
Babel to the Rescue
More research only lead to more questions. Who is this Browserify wizard and why is he dead? What is Webpack doing to fund all their highly produced branding, and why would anybody purchase a Webpack T-shirt? Finally, the biggest question of all: who the hell is this Babel guy who gives off as an electric explosion in your face on hard drugs?
I think it was at this point in my journey of catching up on the last decade where I went truly mad and began pacing around my room, verbally assaulting inanimate objects, and eventually even found myself washed up in a Wendys down the street, shivering and crying to myself.
Now that I've been released from the psyche ward and are free to wander the streets again, I've managed to piece together a bare-minimum understanding of what the hell is going on.
What the Hell is Going On
Gulp is not be the only way to utilize new ECMAScript features. Babel syntax can be compiled a number of ways, such as Babel's CLI, or from Server-side JS, or Webpack if you're Mister-Fancy-Pants. In fact, the trend across the board is that compiling your site with modules via Webpack is winning dramatically. For all we know, this could be the last Babel Gulp tutorial ever written.
Right now we're focusing on the ability to use ECMAScript features on the frontend; a common use-case for things like... well... theming the presentation layer for a blog. If we can pull it off with Gulp, you probably won't struggle much with future methods.
Babel NPM Packages
Alright, so Babel isn't just a single NPM package. It's a lot. Let's see what's there in a basic
Let's not go through all these in detail- in fact, let's take a look at our gulpfile.js:
Note that I've gone ahead and removed anything from the file that has nothing to do with Babel - everything seen here is strictly relevant to building a 'scripts' task. The gist is this:
babel accepts two arrays:
- Presets refers to the version of ECMAScript we're targeting, and what we have implies the latest.
- Plugins allow us to pass any plugins Babel supports; in this case, we're rendering stuff at runtime. Let's not get into it too far.
The rest of the function is simple: we catch errors if any arise, we resolve required dependencies, and then we finally bunch everything into a single file and shove it in our destination folder.
Just to be Clear
When it comes to the best way of achieving ECMAScript 2015 or 2016 etc in the browser, I'm no expert. As previously mentioned, the understanding I've passed on to you is a sort of bare minimum to start doing great things.
As far as what others are doing, I'd be willing to bet that the vast majority of devs utilizing newer ECMAScript functions are running frameworks like React, while the rest have reached a consensus that Webpack is king and Gulp lame. These things may be true.
No matter, this new found power of ours opens a lot of doors. Just wait until you see what we do with MongoDB Stitch.
Hackers and Slackers Newsletter
Join the newsletter to receive the latest updates in your inbox.