Babel: transpiles TypeScript to JavaScript, and converts recent JavaScript which might not have full browser support to older JavaScript which does ESLint: lint

Babel: transpiles TypeScript to JavaScript, and converts recent JavaScript which might not have full browser support to older JavaScript which does ESLint: linting Prettier: formatter/enforces format guidelines Yarn: package manager Webpack: takes the files in your projects and pits them together (bundler) so they can run into the browser. It might minify the code to minimize bandwidth, compress images so that they're smaller and what not via plugins. The complexity is because while JS is an interpreted language, there's often on sizeable projects a mismatch between your source project and how it'll run in so many browsers. That could be because you're having to support old browser (or just Safari on iOS sometimes), but also because of code structure, and commonly bandwidth concerns. I'm a frontend project everything gets sent to the customer every time, and you need to do everything possible to shrink things down. However, you also need to have a working environment to develop in, thus the mismatch and the tools to bridge the mismatch.