javascript - 为什么要在dependencies中声明依赖？

问题描述

看到说--save安装的模块，会显示在dependencies中。并且dependencies中的模块表示生产环境的依赖。比如jQuery。

但是我不懂的是，拿jQuery举例。我为什么要在dependencies中声明依赖？生产环境中，我会直接用script标签引用jQuery，根本不需要dependencies。如果在dependencies中声明了生产环境依赖的模块，会怎么样？会自动帮我添加script标签还是比如模块打包时，打包生产环境模块时会把dependencies中的依赖全部打包进去？但是据我所知，比如webpack在模块打包时是根据require的模块创建的依赖图表来打包的，所以我不太懂为什么要在dependencies声明生产环境依赖。

问题解答

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

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

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

如果你用<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才能够读取到对应的包。

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

这里你揉杂了3个东西：

package.json的依赖管理

webpack的依赖管理

html中的脚本引入

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的依赖管理确实是通过require寻找依赖，它不依赖dependencies。

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

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

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

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

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