Bower和npm在JavaScript依赖管理上有什么区别？

大家好！我是JavaScript新手，正在尝试理解包管理器。我开始学习React，在一个教程中被告知通过npm安装依赖，而在另一个教程中则通过Bower。我完全糊涂了。 我在一个简单项目上尝试了两种方式。以下是我通过npm安装jQuery的方法：

npm install jquery --save

然后通过Bower：

bower install jquery --save

看起来两者都分别将jQuery下载到了`node_modules`和`bower_components`文件夹中。但为什么需要两个不同的工具？它们的根本区别是什么？为什么现在大多数人主要使用npm，而几乎不再提及Bower？ 特别让我困惑的是，在npm中依赖项会进入`package.json`，而在Bower中则进入`bower.json`。我还听说Bower使用“扁平”的依赖结构，而npm使用“嵌套”结构。这在实践中意味着什么？也许我需要针对不同任务同时使用这两个工具？ 希望能得到清晰的解释，谢谢！