素材牛VIP会员
为什么要在dependencies中声明依赖?
 适***的  分类:Html5  人气:967  回帖:5  发布于6年前 收藏

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

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

讨论这个帖子(5)垃圾回帖将一律封号处理……

Lv1 新人
10***19 学生 6年前#1

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

Lv7 码师
ya***cn 移动开发工程师 6年前#2

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

Lv5 码农
ch***am PHP开发工程师 6年前#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才能够读取到对应的包。

Lv1 新人
ba***ag UI设计师 6年前#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可以不使用。

Lv4 码徒
馒***火 JS工程师 6年前#5

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

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

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取