Category: Babel

A Beginner’s Guide to Babel

This article introduces Babel, a JavaScript compiler that allows developers to use next-generation JavaScript today. It can be frustrating to write JavaScript when building web applications. We have to think about the features available in the browsers we’re targeting and what happens when a feature isn’t implement...

Setting up an ES6 Project Using Babel and webpack

In this article, we’re going to look at creating a build setup for handling modern JavaScript (running in web browsers) using Babel and Webpack. This is needed to ensure that our modern JavaScript code in particular is made compatible with a wider range of browsers than it might otherwise be. JavaScript, like most we...

Browserlist is a Good Idea

I think, as front-end developers, we’re well aware that different browsers (and versions) support different things. We make choices based on web features we’d like to use balanced with what statistics tell us about our users and what browsers they use. Only 0.01% of users left on IE 9, we might see from our...

Best JavaScript Frameworks, Libraries and Tools to use in 2017

It seems there are more JavaScript frameworks, libraries, and tools than there are developers. As of May 2017, a quick search on GitHub reveals more than 1.1 million JavaScript projects. There are 500 thousand usable packages on npmjs.org with almost 10 billion downloads every month. This article endeavors to explain t...

Lebab

Turn your ES5 code into readable ES6 (sugar-syntax). It does the opposite of what Babel does. David Walsh has a post on it. I’m interested, as I’m still working on my muscle memory for ES6. Even the simple stuff. So blasting some old code through this as a kick start seems appealing. Direct Link to Article...

Transpiling ES6

While support for ES6 is always increasing, we can’t always assume that users will be using a browser that supports all its features. So, in order to utilize ES6 features now and make sure we won’t run into cross-browser compatibility issues, we need to transpile our code. Let’s look at two possible w...

Babel Plugin to Add Function Names

Have you ever been working with those sweet new ES6 arrow functions, run into a problem, and noticed that now your stack trace is all anonymous functions? Yeah, that’s not so great. That’s why this Babel plugin is so useful. You can add names to your ES6 arrow functions, and it makes debugging a lot more si...

Understanding ASTs by Building Your Own Babel Plugin

This article was peer reviewed by Tim Severien. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! Every day, thousands of JavaScript developers use versions of the language that browser vendors haven’t even implemented yet. Many of them use language features that a...

Modular JavaScript: A Beginners Guide to SystemJS & jspm

Over the past few years, the JavaScript programming language has exploded in popularity. It has become the go-to language for developing both rich web applications, as well as hybrid mobile applications. And as JavaScript projects are becoming increasingly complex, developers are experiencing new requirements of the la...