Babel allows you to code using the newest language features, but "compile" down to older versions of javascript for deployment so you can run on older browsers (possible since JavaScript is Turing complete so you can replace the new-fancy features with less-pretty/less-readable code that does the same thing)
Eslint is a linter.
Prettier is a code formatter.
Yarn is a dependency manager.
Webpack is a bundler for JavaScript files - think of it as conceptually like a linker for C++ et al.
Nothing too different from any other language (apart from babel perhaps), and none of them are essential or required (unlike linkers in C/C++ for example)
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.
4 comments
[ 8.1 ms ] story [ 30.8 ms ] threadWhat are all these things? Why is JS development so complex? Can someone ELI5 this for me?
Eslint is a linter.
Prettier is a code formatter.
Yarn is a dependency manager.
Webpack is a bundler for JavaScript files - think of it as conceptually like a linker for C++ et al.
Nothing too different from any other language (apart from babel perhaps), and none of them are essential or required (unlike linkers in C/C++ for example)
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.