npm
是Node.js
的包管理工具,它的诞生也极大的促进了前端的发展,在现代前端开发中都离不开npm
的身影。前端
本文是npm系列的第一篇,知识很基础,做为一个热身文章,若是各位已是开发熟练工了,彻底能够跳过这篇。node
npm 是基于 Node.js,因此咱们须要安装 Node.js,方式有两种:webpack
// 查看npm版本 npm -v // 更新npm自身 npm install npm@latest -g
在实际使用中咱们既安装本地包(项目依赖),也会安装全局包(命令行工具)。web
可使用下面的命令来安装一个包:npm
npm install <package_name>
移除包能够用指令:json
npm uninstall <package_name>
在项目中安装包时默认会安装到dependencies
中,咱们能够经过如下参数来控制这个行为:gulp
dependencies
中devDependencies
中optionalDependencies
中dependencies
中除此以外还有两个额外的参数:segmentfault
bundleDependencies
中如需从 package.json 文件中删除依赖,须要在命令后添加参数:工具
npm uninstall --save lodash // 经过--save-dev安装的包,移除的时候也需指定为--save-dev将其卸载 npm uninstall --save-dev webpack
全局安装通常是用来安装命令行工具,诸如gulp、http-server,咱们只须要在后面加上-g
,好比:测试
npm install -g http-server
有时候咱们记不清某个包,想查看全部已安装的包应该用什么命令呢:
// depth表明遍历的深度,若是没有该参数,会把全部包的依赖也显示 npm list -g --depth 0
项目中安装依赖后在自动生成package-lock.json
文件,里面包含安装的依赖信息,主要是用来锁定依赖版本,确保团队之间安装依赖时不会出现差别。
前面提到dependencies
的概念,那在npm
中都有哪些依赖呢?
这两个是咱们使用的最多的,也是最须要注意的。
假设咱们有一个插件magic-lint
,它的做用是在提交commit
时检查以及格式化代码,那么里面至少有prettier
插件用来美化代码,咱们须要确保其余用户安装magic-lint
以后能正常使用,那就要把prettier
列为dependencies
。
另外咱们在开发magic-lint
过程是属于开发环境,咱们会须要jest
来测试,普通用户安装时是不须要jest
,咱们把jest
列为devDependencies
后就能够避免这样的状况。
若是添加--production
标记,或者环境变量NODE_ENV
被设置为production
, npm就不会安装devDependencies
中的模块。
那何时用peerDependencies
呢?
假设咱们有一个webpack-plugin-god
插件,它只是webpack
的插件,并不依赖webpack
,因此在dependencies
或devDependencies
中不会写明webpack
,但事实上它又是针对特定的webpack
版本开发,这个时候咱们就能够把webpack
写入peerDependencies
中。
若是有一个包属于可与有无的,咱们就能够把它归为optionalDependencies
写代码时咱们能够这样使用可选包:
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() }
假设咱们有一个package.json
:
{ "name": "awesome-web-framework", "version": "1.0.0", "bundledDependencies": [ "renderized", "super-streams" ] }
经过npm pack
命令咱们能够获得文件awesome-web-framework-1.0.0.tgz
,里面会包含renderized
和super-streams
两个依赖。
在项目中执行npm install awesome-web-framework-1.0.0.tgz
,结构也会变为:
├── node_modules ├── awesome-web-framework │ └── renderized │ └── super-streams └── xxx
下一篇将讲解 npm install
,看了以后,但愿可以让你惊叹一下:“哇~ 原来还能够这样”,我就心满意足了。
本文同步发表博客: 什么是npm系列:1、npm简介