javascript - Warum eine Abhängigkeit in einer Abhängigkeit deklarieren?

Question

Wenn Sie das von --save installierte Modul sehen, wird es in Abhängigkeiten angezeigt.
Und die Module in Abhängigkeiten repräsentieren die Abhängigkeiten der Produktionsumgebung. Wie jQuery.

Aber was ich nicht verstehe, ist, jQuery als Beispiel zu nehmen. Warum sollte ich Abhängigkeiten in Abhängigkeiten deklarieren?
In einer Produktionsumgebung verwende ich Skript-Tags direkt, um auf jQuery zu verweisen, ohne jegliche Abhängigkeiten. Was passiert, wenn die Module, von denen die Produktionsumgebung abhängt, in Abhängigkeiten deklariert werden? Werden für mich automatisch Skript-Tags hinzugefügt oder werden beispielsweise beim Packen von Modulen, beim Packen von Produktionsumgebungsmodulen alle Abhängigkeiten in Abhängigkeiten gepackt? Aber soweit ich weiß, werden Webpack-Module beispielsweise auf der Grundlage des vom Anforderungsmodul erstellten Abhängigkeitsdiagramms gepackt, sodass ich nicht ganz verstehe, warum Abhängigkeiten der Produktionsumgebung in Abhängigkeiten deklariert werden sollten.

Answer 1

我们在实际开发中会用到很多模块，有些模块（如，gulp，babel，这些放到devDependencies中）都只是开发环境中用到的，而jquery是用在生产环境中，当你部署项目到生产环境时，执行 npm install --production, 只会安装dependencies中的模块，这样管理模块就会很方便

Answer 2

事实就是那个字段是设计给 node 的，所以你写不写都无所谓。

详细来说，作为一个前端项目，你的依赖要么进行打包，要么是 script 标签引入，所以你的 deps 字段里面有什么根本不会影响最终的代码。

Answer 3

• 如果你用<script>加入模块的话，这个引入JS/CSS的方法本身用不到npm包管理，可以直接忽略package.json的配置问题

• 如果你使用如webpack进行打包。webpack在模块打包时是根据require的模块创建的依赖图表来打包的，这的确没错。但是之后还有一步，就是webpack通过依赖图表进行打包的时候，如果依赖图表里有jQuery依赖，webpack还是要去找jQuery的文件，然后注入到打包的文件之中。如果你不写dependencies的话，在团队开发中，另一个人改了一点代码，然后用npm install安装了依赖包，再重新打包的时候，webpack创建出依赖图表，依赖图表中依赖了jQuery，然而webpack在node_modules里却找不到要注入到目标文件的jQuery代码，这样他重新打包就会失败。当然，如果你只有自己一个人开发的话，可以忽略这一点。

• 当然，dependencies还有一种应用情况，比如说我之前写的一个node.js爬虫。由于这个爬虫是直接用node运行JS代码的，所以我的JS文件里面require()的包都需要写在dependencies里，部署的时候用npm install安装完这些依赖，require才能够读取到对应的包。

Answer 4

我觉得你可能是因为需要使用webpack去开发页面，才使用node的。否则你不会去问dependencies和script之间的关系。这两者之间毫无关系。

这里你揉杂了3个东西：

1. package.json的依赖管理

2. webpack的依赖管理

3. html中的脚本引入

　package.json的依赖管理

node不只是可以用来做页面开发，还可以做很多事情，比如开发服务器程序，开发JS库等等。dependencies记录和保证你的项目在被使用时的依赖；devDependencies记录和保证你的项目在被开发时的依赖。

举一个例子，我们开发一个库，并准备发布在NPM上。需要使用lodash.sample，开发时使用es6，并且还使用eslint对代码风格进行规范。那么dependencies中就有lodash.sample，devDependencies就有babel和eslint。

dependencies就保证了任何人在install我们这个库的时候，lodash.sample都会被安装（否则这个库将无法正确运行）；devDependencies保证任何人在（或者你自己在其他设备上）对这个项目进行修改（开发）时，通过npm install就能获取同样的开发环境（打包，转码吗，约束，构建等）。想想，如果你在另外一台电脑上，想对开发这个库的2.0版本，如果没有devDependencies，你就需要手动的再次安装babel和eslint等，要不你就要去从最初的项目中copy整个node_modules文件夹。

webpack的依赖管理

webpack是一个构建工具，可以用在页面的开发中去，也可以用在其他地方。webpack的依赖管理确实是通过require寻找依赖，它不依赖dependencies。

还是上面库的例子，我们可以使用webpack进行打包（那么devDependencies中应该有webpack）。就算你npm install --save了其他十几个模块，webpack时，也只会将lodash.sample打进来。

html中的脚本引入

webpack在用来开发页面时，最先开始是将打包的js文件，手动的在html中以script形式引入，但是后来有插件帮我们自动完成这个过程。后来一些脚手架工具如vue-cli，内置负责的webpack配置，将整个过程优化和自动化。加上整个开发过程在node中完成，因此可能导致了你误以为dependencies和script之间是否有联系。

回到你的问题：“为什么要在dependencies声明生产环境依赖”

原因是：不记录这些依赖，其他人（或者你自己在其他设备上）进行再开发时，无法知道该项目需要引入哪些依赖，无法进行开发。如果你只是一个人不切换电脑的话，dependencies可以不使用。

Answer 5

工作环境改变的时候，你的项目要是想正常运行。必须声明依赖，这样不管在哪里，只需要一句
npm install即可还原工作环境，依赖什么的全部解决