So first, we’ll see some reasons
The first reason is that our primary environments, i.e. browsers, cannot take the code we write and “just run it”. Why? Because much of the modern ES2015 syntax hasn’t been fully implemented in all browsers. Plus, we have additional abstractions like JSX which browsers don’t understand at all. Our code needs to be “converted” into something that browsers can understand first. This process is called transpilation, and the tools that do this are called transpilers.
require()), and we in React world use the ES6 module system (which uses
import statements). So, to solve this problem, we have tools called module bundlers which take our code written in a module system and create a static JS file from it, which can run in the browser.
Now that we have seen the reasons behind having tools, let’s see some of the popular tools that I’m sure you might have heard about.
Babel is a transpiler. It takes in your code written in newer JS syntax, like ES6, and produces the equivalent code in an older syntax which older browsers can run.
Babel also allows you to enable experimental syntax features, which might not have been implemented in browsers yet. So, you can write code that uses newer syntax, and not worry about whether that code will run in your user’s browser.
Also, Babel has a built-in JSX transpiler. It can take JSX syntax that we write with React and produce equivalent JS code from it. Pretty cool, right!
When webpack processes your codebase, it internally builds a dependency graph which maps every module the project needs and generates one or more bundles that we can deploy. Generally, transpilation tools (such as Babel) as integrated with module bundlers (such as Webpack). This integration is possible in Webpack using the concept of “loaders”. We can also use webpack to support bundling many different assets such as images, fonts and stylesheets.
Webpack comes with a development server which allows you to host your code in dev environment. Such server can then watch your files and rebundle your code every time you make a change. (aka Hot Module Replacement)
Alternatives to Webpack include Parcel, Rollup, Blazepack, etc.
NPM Is a package manager. If you come from Python ecosystem, think
pip. NPM is a tool for downloading packages, resolving dependencies between them and providing a package abstraction for your project.
Your project might have a lot of dependencies on other packages. When another developer wants to work with your codebase, all he needs to do is run
npm install and all dependencies will be installed automatically. If you are developing library, npm also helps you publish it so that other developers can easily install it.
An alternative for npm is Yarn, which is another package manager which uses the same registry that npm uses but is faster.
You can also configure Jest to do some tasks before it runs the tests, like running Babel to transform the JSX code to JS code first and then running the tests. So, Jest works well with React codebases as well.
ESLint is a linter. It statically analyzes your code to find problems based on formatting rules, code quality rules, and any custom rules you might set and then outputs them as warnings or errors.
It parses and inspects the source code, and then analyzes the code’s syntax and structure. If any code violates the rules defined by the linter, a warning or error is shown. There are also plugins for ESLint that can check best practices for React and JSX (for example, eslint-plugin-react or eslint-plugin-react-hooks)
ESLint integrates nicely into editors and IDEs to provide a great development experience. It’s especially helpful to establish some kind of a guideline for the project if you are working in a team. It can also be integrated in CI CD pipeline so bad code will be stopped from entering production environment.
Prettier is a code formatter. It enforces consistent style by parsing our code and re-printing it with its own rules, like maximum line length, or tab size, etc.
You can integrate Prettier with your IDE or editor to have it run every time you save your file, so that you don’t have to worry about formatting your code at all!
That’s it for this post, I hope it helped clarify any doubts you might have about tooling in JS ecosystem. See you in the next one!