Software Consultant and Web-Enthusiast
They are created to make our life easier. But at the cost, that we need to understand how they work.
Less overhead, faster loading times, etc. But without a tool, you would have to manually open every JS file and copy its content into one big file or you would have to write all your code into one big file right from the beginning. Both suboptimal approaches to the problem. So you download or write yourself a bundler that does all the ugly work for you.
Also they can add quality checking tools like Linters, that can help to improve your code and catch some errors you might made.
The problem with all the tools is, they are software and they need to be understood. Some of them add new code or even modify existing code, which is not always obvious to the average developer (I'm considering myself one, hopefully at least average D:)
They add complexity and for getting started this complexity can be a no-go.
Yes, React had a way to use this without it and I even wrote a small tutorial that explains how to use React with ES5, but most of the examples and tutorials online required at least one ES2015 and/or JSX.
But I will try to write a bit about those I know. I guess, since I shipped a few Web apps in my time, I will have met enough to get started.
There are a bunch of package managers. Most of them build on the npm repositories. That means, even if you don't use npm, you probably end up with libraries from their repos.
If you got tools, why not get tools to run your tools? Joke aside, if you got a few things to do, you want to coordinate them somehow and not always type the whole commands with all the arguments and stuff. Think Make for JS. Oh and can also use Make ;)
scriptattribute in its
package.jsonthat can be used to define some simple tasks. Has access to CLIs installed in dev-dependencies, so they don't need to be installed globally.
scriptsaren't enough anymore.
If you want to use all the fancy new syntax extension, like JSX, of today or you need some strong typing, like FlowType or TypeScript, you are forced to use a compiler that turns your code back into something that a browser understands.
I don't know if bundler is the right word, since most of these tools don't just do bundling. They also minify or modify source in different ways.
Some of the compilers mentioned above are already some kind of code quality tools, because of their type systems. But there are other ways.
As good developers, we all love TDD and BDD amirite? ;) So there are many tools that can help you accomplish this task.
Depends on what you need.
I'm a front-end developer and often start with npm, Webpack and http-server.
Npm gives me the ability to install 3rd party libs and define some scripts, for example running Webpack or the http-server.
For proof of concepts I often use content delivery networks like unpkg so I don't have to install anything. Unpkg gives HTTP access to all packages in the npm repository.
Just a HTML file with some
<script> tags to get started.
Well, it would be nice if there were more tutorials that did step back and try to explain how things work on a basic level, before they abstract it away behind some sophisticated tool.
But if you want to build fast and reliable Web applications, you need some of these tools or write them yourself.