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.
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.
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 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.
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.
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 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.
This article was originally published on Live Code Stream by Juan Cruz Martinez (twitter: @bajcmartinez), founder and publisher of Live Code Stream, entrepreneur, developer, author, speaker, and doer of things.
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.