In this post, I am presenting a few of the most popular JavaScript tools among developers: Webpack, Babel, ESLint, and Prettier. If you haven’t used even one of them in your projects, trust me, you are missing out. So, definitely give them a try on your next project.
Webpack
Webpack is a popular module bundler among JavaScript developers. It takes the large collection of JavaScript modules in your application as input and bundles them into one or several JS files that you can easily include in an HTML document.
A modern-day web application contains a considerably high number of JS files because of our tendency to use more and more dynamic features in the application. While the added features are great for the users, managing these modules along with other third-party dependencies used in the application, without additional support, could become quite a headache for developers.
For example, you’ll have to manually control the order each script is executed on the browser. Loading many files could also affect the performance of your application.
With the use of Webpack, you can stop worrying about these issues. Webpack, easily and efficiently, takes care of this business for you. It analyzes the JS modules of the application, starting from an entry point, and constructs a dependency graph. With the help of loaders and plugins, it then handles tasks like dealing with dependencies, deciding load priorities, and resolving paths.
Not just JavaScript, you can also use Webpack’s css-loader to manage the CSS files.
Webpack allows you to define split points in the code so that the output is bundled to several JS files instead of a single long file. It gives you the freedom to load parts of code only when they are needed.
This on-demand, lazy loading could be used efficiently to increase the performance of your application. You load the new code blocks only when the user has done something to require their functionality.
Especially, if you are working with frameworks like React, the functions provided by Webpack, splitting and bundling code, dealing with dependency modules, will save you a lot of hassle of managing them by yourself.
Babel
Babel is the most popular transpiler for JavaScript. It converts ES6 JavaScript code into ES5 JavaScript so that the code can run in even the old browser versions.
Transpilers are tools that take the code written in one language as input and convert it to another language. In Babel’s case, it mainly takes ES6 code and outputs ES5 code.
Take the following code snippet written using newly introduced classes in ES6.
Babel will convert it into ES5 like this.
If that’s all Babel does, why should you use Babel in your project? Though developers embraced new ES6 features introduced to JavaScript in stride, some browsers are yet to catch up with ES6 support.
If the users of your web application are using one of these browsers, or simply older browser versions, they won’t be able to take advantage of all the great features you have added to the application. To make sure your app is accessible to everyone, Babel steps in and transpiles your code to ES5, which is supported by all the browsers.
Should you stop using Babel after all the browsers start supporting ES6? The answer is, no. Even though the focus is currently on ES6, ECMA releases new JavaScript updates yearly. It’ll always take browsers some time to catch up with the newest standards.
But with the support of Babel, which adopts the newest standards much sooner, you won’t have to worry about transitioning to use new JavaScript features when developing your applications.
If you are a React developer who wants to use ES6 features or JSX in your code, letting Babel help you with transpiling the code to ES5 is the wise choice to make. Also, you can use Babel with Angular to write ES6 code.
In addition to ES6, Babel can transpile Typescript to ES5 as well.
ESLint
ESLint is the default linter of most JavaScript developers. It helps you write cleaner code and adhere to the coding conventions you follow.
The task of a linter is to analyze your code and flag programming and style errors in it. With ESLint, you have complete control over which errors should be flagged and what their error level is. You can define the error level of a rule as error, warning, or disabled.
ESLint is quite useful to spot errors like undeclared variable assignments and issues related to variable scope.
You can also use rules to enforce certain coding conventions in your code. For example, you can define rules to disallow the use of await inside loops or disallow the use of a console.
If the project you are involved in follows a specific style guide and coding convention, you can define ESLint rules to help you stay consistent with them. If the style guide you follow has a limit on continuous empty lines, you can specify this in the rules. Then, whenever you mistakenly leave too many empty lines, ESLint shows an error in your code.
Prettier
Prettier is a code formatter. You can use it to automatically format your code without having to manually check for style errors.
Though it comes with a set of rules for its preferred style, you can set up your own rules to reflect the style guide you follow. Then, all you have to is save the source file for Prettier to format your code to suit the defined rules.
Similar to ESLint, Prettier helps you write cleaner code that confirms to a style guide of your choice. The difference between ESLint and Prettier when it comes to enforcing style is that ESLint only shows you errors on what you are doing wrong, but Prettier does the formatting by itself.
But it’s important to understand that they are not interchangeable. ESLint offers more use cases than checking style errors.
Conclusion
JavaScript ecosystem relies on tools that help developers to resolve problems and build amazing apps. These tools provide support to clean code, compatibility issues, and performance.
It is thanks to these tools that frameworks like React are possible, and that JavaScript can be present in much more than just the web.
It is also true that some of these tools are here just to fix the “mess” that JavaScript legacy left us.
Live Code Stream is also available as a free weekly newsletter. Sign up for updates on everything related to programming, AI, and computer science in general.
