Today was mostly a lazy Sunday, but I did learn more about Babel and the world of JavaScript transpilers and build tools. Then I went to a friend’s house for a “Game of Thrones” watch party (plus board games and BBQ), and I went swimming for the first time in ages!
Real-time notes
1:23pm: It’s been a lazy Sunday so far, but I have a little time to work on stuff now, before heading over to our friend’s party for BBQ, swimming, board games, and watching the new season premiere of “Game of Thrones”! I’ve been looking forward to this party all week long. But as for right now, well, I’m sort of sleepy and hungry and it’s a bit too hot in my apartment. And I don’t really feel like working. I figured I may as well try to pick up where I left off a couple days ago when I started looking into how to use Babel. I should just try it out today. But I also wanted to see how to go about using plugins, since I read that they’re required to use async functions. I guess I’ll try searching for that a bit first.
1:57pm: I got distracted by the internet and by the pork we’re cooking. Oops! I did open up a bazillion tabs about Babel and JavaScript and build tools, though. Time to start poking through those.
Notes and questions about Babel
-
In this tutorial on using Babel and Webpack, it says “Babel can’t support all of ES6 with compilation alone — it also requires some runtime support.” I have no idea what that means! What is runtime support, as opposed to “compilation alone”? (I did answer this question by the end of these bullet points, though! Yay!)
-
That link above also says “Babel also bakes a number of smaller helpers directly into your compiled code” and that it’s OK for single files, but when bundling with Webpack, those helper functions get repeated and bloat the JavaScript files. So he recommends the “transform-runtime” plugin. (But I still don’t understand why, or what that does!)
-
To read sooner or later: Webpack Made Simple, from the same blog as the link above.
-
This ECMAScript 6 tutorial has a section on Setting up a Babel project without any build tools. I like that!
-
The tutorial above also has a section on Setting up Webpack that I’ll probably look into later.
-
While reading “Taming the asynchronous beast with ES7” (which was a nice review of async functions that pointed out a couple of new gotchas that I hadn’t come across before), I discovered another tool, which I’ll make a new bullet point for…
-
Regenerator, a tool that transpiles generator functions into ECMAScript 5 compatible code!
-
Reading over “JavaScript Transpilers: What They Are & Why We Need Them”, those phrases like “stage 1” make a lot more sense to me now (they refer to how the ECMAScript committee slowly moves features into each next version of the language).
-
I found the Babel Handbook from the article mentioned above, and it looks awesome! The review of the various Babel tools was very helpful, and they also explained the “stage 1” etc terminology very well there too.
-
The Babel Handbook’s section on polyfills finally cleared things up for me! After Babel transpiles some code, the syntax is transformed, but that is still no guarantee that the environment running the transpiled code knows about all the functions and objects and so on being used! So that’s what polyfills solve, and Babel uses core-js and Regenerator as its polyfills.
-
The Babel runtime refers to a file containing all the helper functions generated by Babel, so that way you can cut down on repetitive code. Nice! (I’m still not sure how this works with client-side code, though.)
-
I also found the Webpack How-to, which looks like it might be handy later! (Apparently Webpack is known for lacking good documentation.)
-
I learned some new stuff from this article, too: What are Babel “plugins” and “presets”? (And how to use them). There’s a
babel-standalonepackage, which is exactly whatcreate-react-appuses! Good to know!
3:05pm: I lost track of time! Guess I was enjoying just exploring and reading, without being in any rush to actually do or make anything yet. It is Sunday, after all. Plus, I’m starving! My stomach keeps growling at me, and I keep ignoring it since I know I’ll eat a lot at tonight’s party. OK, time for a quick break (and maybe a tiny snack), and then I’ll read a bit more and maybe try something out real quick.
3:42pm: Back! Not sure how so much time has passed. I must be experiencing some micro-sleep or something. Anyway, my only remaining question about Babel for now is how I should configure it to work with ES7 features like async functions. In Babel’s online REPL, the ES2017 and “Stage 3” presets both convert async functions properly. Cool! And this StackOverflow answer says I could either use the “Stage 3” preset or the “transform-async-to-generator” plugin. And I think I need either the Babel polyfill or the Babel runtime transform.
Steps for trying out Babel in the browser
-
Create a sample client-side project with an async function. (Check that it doesn’t work in certain browsers!)
-
Install dev dependencies:
npm install --save-dev babel-cli babel-preset-es2015 babel-preset-stage-3 -
Install runtime dependencies:
npm install --save babel-polyfill -
In
package.json, add a script for"build": "babel src -d lib"so that now the project can be transpiled by runningnpm run build, which should take files from thesrcfolder and put the compiled files into thelibfolder. -
Create a
.babelrcfile to configure it with the following presets:{"presets": ["es2015", "stage-3"], "plugins": []} -
From the
babel-polyfillpackage, move thedist/polyfill.jsfile into the main project folder and include it with a script tag before including any of the compiled JavaScript files.
After I get that working, then I can look into streamlining the process with Webpack and also start using modules and stuff!
Wrapping up: Shortly after setting up my files and installing those packages, it was time to head over to my friend’s house for that party. I had a great time! That was also the first time I’ve gone swimming since – well, I can’t even remember the last time I actually went swimming! We played board games, grilled some meat, watched “Game of Thrones”, and called it a night somewhat early. Then a couple of us went out for ice cream and walked around the neighborhood before going home. I did stay up a bit late, because I guess I was anxious about starting another work week and not feeling up to the task of facing the next challenges ahead of me. But at least I did get to enjoy a great weekend.
Gathering string
-
Today I learned that PouchDB “is an abstraction over IndexedDB, WebSQL, LevelDB (in Node), and CouchDB (via Ajax)” (via this blog post)
-
I wasn’t looking for this, but today I learned that the technical committee behind the ECMAScript standard is called the TC39 committee, and that proposals for new features of the language go through a five-stage process, from stage 0 (“strawman”) up to stage 4 (“finished” and ready to be included in the formal ECMAScript standard).