看到说--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中的脚本引入
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可以不使用。
工作环境改变
的时候,你的项目要是想正常运行。必须声明依赖,这样不管在哪里,只需要一句npm install
即可还原工作环境,依赖什么的全部解决