dependencies和devDependencies配置
编写时间：2019-06-28
更新时间：2019-7-31 11:43作者：鬼小妞
目的：本文旨在帮助一些刚项目开发的人员了解
如何创建package.json； （点击直达）；package.json参数简介； （点击直达）；安装依赖的三种方式：:npm install、npm install --save、npm install --save-dev； （点击直达）；使用--save还是--save-dev；添加到开发环境还是生产环境？（点击直达）；项目负责人和其他项目开发者在安装依赖时应该如何做（点击直达）；备注： 本文
整理及编写了与项目安装依赖相关的一些知识，仅供参考，描述不当的地方，请评论指正状态：
待完善2019-7-31
在看这篇文章之前，建议你先看一下阮一峰老师写的这篇教程： package.json文件
疑问：在一个项目中，我把代码提交到Git上，别人Clone下来之后，怎么知道我需要下载哪些依赖库
我们clone代码之后，你会发现是没有node_modules这个文件夹的，node_modules用来保存依赖库，此时我们就需要通过npm install来下载依赖库，但是需要下载哪些库，这时候就需要定义package.json，配置好dependencies和devDepencies，这样项目其他开发人员在执行npm install 命令的时候，就可以下载对应的依赖库了
package.json简介
每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据），开发人员一般在git clone项目后使用npm install命令根据这个配置文件(里的dependencies和devDependencies参数)，自动下载所需的模块，也就是配置项目所需的运行和开发环境。
创建package.json
- 步骤式创建(需按步骤手动输入配置)
npm init
- 一步自动创建（自动默认配置）
npm init -y
package.json参数简介
name: 项目名称
version: 项目版本号
description: 项目描述
keywords: {Array}关键词
便于用户搜索到我们的项目
homepage: 项目url主页
license: 项目许可证.
让使用者知道是如何被允许使用此项目。默认是”ISC”
author,contributors: 作者和贡献者。
author,contributors 的格式设置如下： { “name” : “Barney Rubble” , “email” : “[email protected]” , “url” : “barnyrubble.tumblr.com/” }
bugs: 项目问题反馈的Url或email配置
如： {
“url” : “github.com/owner/proje…, “email” : “[email protected]” }
main : 主文件。
比如默认是index.js，项目名称叫mymodule。那么require(‘mymodule’)将返回index.js返回的内容
bin : 项目用到的可执行文件配置
man : 指定一个单一的文件名或一个文件名数组。
意思类似于linux命令中的man 命令，来查看一个命令的用法 如果只给man字段提供一个文件，则安装完毕后，它就是man 的结果，这和此文件名无关
{ “name”: “foo”, “version”: “1.2.3”, “description”: “A packaged foo fooer for fooing foos”, “main”: “foo.js”, “man”: “./man/doc.1” } 上面这个配置将会在执行man foo时就会使用./man/doc.1这个文件。
如果指定的文件名并未以包名开头，那么它会被冠以前缀，像这样
{ “name”: “foo”, “version”: “1.2.3”, “description”: “A packaged foo fooer for fooing foos”, “main”: “foo.js”, “man”: [ “./man/foo.1”, “./man/bar.1” ] } 这将会为man foo和man foo-bar创建文件
man文件必须以一个数字结尾，和一个可选的.gz后缀(当它被压缩时)。这个数字说明了这个文件被安装到哪个节中
{ “name”: “foo”, “version”: “1.2.3”, “description”: “A packaged foo fooer for fooing foos”, “main”: “foo.js”, “man”: [ “./man/foo.1”, “./man/foo.2” ] } 会为使用man foo和man 2 foo而创建
directories : CommonJS Packages规范
说明了几种你可以用directories对象来标示你的包结构的方法
directories.lib : 库文件夹的位置
目前没有什么地方需要用到lib文件夹，但是这是重要的元信息
directories.bin : 如果你在directories.bin中指定一个bin目录，在这个目录中的所有文件都会被当做在bin来使用。
由于bin指令的工作方式，同时指定一个bin路径和设置directories.bin将是一个错误。如果你想指定独立的文件，使用bin，如果想执行某个文件夹里的所有文件，使用directories.bin。
directories.doc : 把markdown文件放在这。也许某一天这些文件将被漂亮地展示出来，不过这仅仅是也许
directories.man : directories.man指定的文件夹里都是man文件，系统通过遍历这个文件夹来生成一个man的数组
directories.example : 把示例脚本放在这。也许某一天会被用到
repository : 项目代码存放地方
“repository” :
{ “type” : “git”
, “url” : “https://github.com/npm/npm.git”
}
“repository” :
{ “type” : “svn”
, “url” : “https://v8.googlecode.com/svn/trunk/”
}
复制代码scripts : 声明一系列npm脚本指令
prepublish : 在包发布之前运行，也会在npm install安装到本地时运行
publish,postpublish : 包被发布之后运行
preinstall : 包被安装前运行
install,postinstall : 包被安装后运行
preuninstall,uninstall : 包被卸载前运行
postuninstall : 包被卸载后运行
preversion : bump包版本前运行
postversion : bump包版本后运行
pretest ,test ,posttest : 通过npm test命令运行
prestop ,stop ,poststop : 通过npm stop命令运行
prestart ,start ,poststart : 通过npm start命令运行
prerestart ,restart ,postrestart : 通过npm restart运行
"scripts": {
"dev": "npm run start",
"dist": "cross-env NODE_ENV=production node ./tools/script.js",
"lint": "eslint src/ --ext .js,.vue && stylelint \"src/**/*.vue\" --syntax less",
"lint:js": "eslint src/ --ext .js,.vue",
"lint:style": "stylelint src/**/*.less --syntax less",
"pub": "npm run dist",
"start": "cross-env NODE_ENV=development node ./tools/script.js",
"test": ""
}
复制代码config : 配置项目中需要的配置参数：
{
“name” : “foo” ,
“config” : { “port” : “8080” } ,
“scripts” : { “start” : “node server.js” }
}
复制代码server.js中使用process.env.npm_package_config_port来访问port 用户也可以这样修改：npm config set foo:port 80
dependencies : 项目在生产环境中依赖的包
devDependencies : 项目在开发和测试环境中依赖的包
peerDependencies : 在某些情况下，当一个主机无法require依赖包时，你会想要告诉它还有哪些工具或库与这个依赖包兼容。这通常被成为一个插件。尤其是在host文档中声明的模块会暴露一个特定的接口
{
“name”: “tea-latte”,
“version”: “1.3.5”,
“peerDependencies”: {
“tea”: “2.x”
}
}
复制代码这将确保tea-latte这个包只会和2.x版本的tea一起被安装。执行npm install tea-latte可能产生以下关系图：
├── tea-latte@1.3.5
└── tea@2.2.0
复制代码bundledDependencies : {Array}，发布时会被一起打包的模块
optionalDependencies : 如果一个依赖模块可以被使用， 同时你也希望在该模块找不到或无法获取时npm继续运行，你可以把这个模块依赖放到optionalDependencies配置中。这个配置的写法和dependencies的写法一样，不同的是这里边写的模块安装失败不会导致npm install失败。当然，这种模块就需要你自己在代码中处理模块确实的情况了，例如：
try {
var foo = require(‘foo’)
var fooVersion = require(‘foo/package.json’).version
} catch (er) {
foo = null
}
if ( notGoodFooVersion(fooVersion) ) {
foo = null
}
// .. then later in your program ..
if (foo) {
foo.doFooThings()
}
复制代码engines : 声明项目需要的node或npm版本范围
{ “engines” : { “npm” : “~1.0.20” } }
{ “engines” : { “node” : “>=0.10.3 <0.12” } }
复制代码os : 指定你的项目将运行在什么操作系统上
cpu : 指定你的项目将运行在什么cpu架构上
preferGlobal : 如果你的包需要全局安装，通过命令行来运行，那么设置为true。如果这个包被本地安装则会出现一个警告
private : 如果设置为true, 那么npm会拒绝发布它
publishConfig
package.json的dependencies和devDependencies是什么意思
devDependencies本地环境开发环境（开发环境）dependencies用户发布环境（项目所需的运行环境）
安装依赖的三种方式
-
npm install:将依赖模块安装到项目，但不写package.json（不推荐，这样最终需要手动添加）； -
npm install --save:将模块安装到项目，写入的package.json的dependencies（生产环境）中； -
npm install --save-dev:将模块安装到本地，写入package.json的devDependencies（开发环境）中。
如何知道使用--save还是--save-dev；添加到开发环境还是生产环境？
-
使用--save还是--save-dev
dependencies依赖的包不仅开发环境能使用，生产环境也能使用按照这个观念很容易决定安装模块时是使用--save还是--save-dev -
添加到开发环境还是生产环境
-
【npm install --save】添加到生产环境dependencies的一般是项目所使用的框架。或者说项目正常运行需要的东西。 比如你在开发一个前端框架，这个框架是依赖与 jQuery 的， jQuery 就是 dependencies， 你试试没有把jQuery添加到dependencies。哈哈哈，恭喜你，等着修bug吧。 其他的dependencies如，vue，angular，electron，express。 -
【npm install --save-dev】添加到开发环境devDependencies的一般是项目所使用的工具和插件。 没有这些工具，你就没办法项目开发。 比如你在开发是用到的 gulp，grunt，webpack之类的打包工具和插件。没有这些打包工具，项目能正常运行，但是无法进行项目打包。 -
项目正常运行，和项目被打包有毛关系啊，所以，分清楚项目运行和项目开发
-
项目负责人：配置package.js的dependencies和devDependencies时：
-
使用
npm install --save将模块安装到项目，写入的package.json的dependencies（生产环境），例如：npm install vue@3.0 --save 复制代码- 生产环境只需要我们能正常运行该项目所需要的模块， 比如vue，vue-router，express，jQuery等等这些，项目没有这些依赖会出错
-
使用
npm install --save-dev写入的package.json的devDependencies（开发环境），例如：npm install webpack@3.0 --save-dev 复制代码
开发环境就是开发阶段，我们所做的单元测试，webpack，gulp，supervisor等这些工具，都只是在开发阶段需要，一旦项目投入需要便不再需要。
项目其他开发人员：从git上pull下来项目来开发时
一般只需要：
- 【下载项目依赖】
- 一定要进入对应的项目文件夹下，使用
npm install默认安装dependencies和devDependencies中的模块，如果只需要安装生产环境中的模块使用npm install -production
- 一定要进入对应的项目文件夹下，使用
一般我们只需要使用npm install下载完依赖就可以运行的，但是，如果你没有安装过git、node/npm等，就需要【根据开发文档配置开发环境】
- 【根据开发文档配置开发环境】
- 如，安装node对应版本，安装webpack等，一般使用
-g安装node/npm全局模块，例如，使用
npm install webpack@3.5.1 -g 复制代码- 请注意，一定要根据项目的package.json里的dependencies和devDependencies来安装全局模块
- 如，安装node对应版本，安装webpack等，一般使用
参考
- PACKAGE.JSON---入门说明
- package.json文件————（阮一峰）
- 你真的理解devDependencies和dependencies区别吗?
- dependencies和devDependencies的正确使用姿势
- Electron + Vue + Vscode构建跨平台应用（二）Electron + Vue环境搭建