How to painlessly include libraries on the frontend?

Question

Layout

Tell me how you can effectively connect libraries on the front?
I used to use bower, but now it seems like yarn has replaced it, even at the office. page says that bower is better not to use. (By the way, who knows, please explain why it was replaced by yarn, and not npm, because they do not seem to differ in appearance).
In bower, I just built js scripts in the main file along with my scripts, manually writing the path to the scripts all the time. Is it possible to somehow automate this process so that I can simply connect jquery, let's say, and the scripts with styles would automatically pull up and get lost somewhere ..
Also, enlighten me, I'm clearly missing something =) How are libraries connected to yarn? As I understand it, it is enough to write require somewhere in the webpack .. But I use galp, how can I be there? It's just that the connected libraries are thrown into the node_modules folder, which is terribly inconvenient .. Is it possible to somehow throw the usual dependencies into a separate folder, so that it would be easier to search for them later? Or how not to get confused with hundreds of node modules)
In general, share your practice in connecting libraries

Answer 1

Bower is dead. Use npm or yarn. I also highly recommend mastering webpack. It just allows you to specify only a single file - the entry point, everything else it will pull up automatically and create two minified files - scripts in one, styles in the other. Of course, you can configure it so that third-party libs are placed in a separate file, and your own code is placed in another file. For example, when using webpack, you can include jquery like this: To make it even cooler, so as not to import jquery in each file, you can use the ProvidePlugin webpack plugin:

new webpack.ProvidePlugin({
  $: 'jquery',
})

After that jquery will be available in any js file.