NPM使用手册

NPM是什么

在项目开发过程当中，我们常常需要引用他人已经开发好的包，比如React，Webpack, angular等等，而npm就是一个用来管理（安装，查看，更新，卸载...）这些包的工具。你也可以上传你的包，和使用公共的包，可以到npm官网查看详细信息。

使用准备

1. 安装Node

   安装完毕可以node -v 查看版本号

2. 安装NPM
   命令行：npm install npm --global
   解释：--global为全局安装的意思，整个电脑环境都可以使用，-g是全局安装简写

使用NPM

安装指定包

1. 全局安装

命令行：npm install webpack --global

解释：webpack为你想要安装的包名，--global说明是全局安装此包，全局安装后可以供命令行(command line)使用，用户可以在命令行中直接运行该组件包支持的命令，如下图全局安装webpack后的cmd文件

2. 局部安装(默认行为)

命令行:npm install webpack 

解释：比如你想在一个叫‘mx-npm’的文件夹安装一个包，你可以通过mkdir mx-npm 创建一个叫mx-npm的文件夹，然后cd mx-npm 进入到文件夹，在来执行安装命令行，也可以直接在对应的文件夹内，按住shift，点鼠标右键，点击在此处打开命令窗口，要进入到你要安装的项目文件内来输入命令行

引用方式：可以直接通过require('')的方式引入项目中node_modules目录下的模块,也可以用es6的import，

3. 为什么全局安装后还要本地安装?

详细见nodejs全局安装和本地安装的区别
总结：有时候一些神奇的bug，很有可能是你的包的版本装的不对，还是按照package.json来安装比较好，保证不同版本的包之间的相互依赖。

4.安装制定版本

命令行：npm install webpack@2.1.0
解释：局部安装webpack其版本号为2.1.0

删除指定包

1. 全局删除
   命令行：npm uninstall webpack -g
   解释：webpack为包名，-g是全局的缩写

2. 局部删除
   命令行： npm uninstall webpack

查看

1. 查看项目安装了哪些包
   命令行：npm list
   

2. 查看某个包的信息
   命令行： npm info bootstrap
   

3. 查看全局安装的根目录
   命令行： npm root -g

   一般在  \ Users \ 用户名 \ AppData \ Roaming\底下，我已经能记住了
   

更新

1. 检查更新
   命令行：npm outdated

2. 更新限定
   在package.json里面会被限制更新的版本号，见下文

3. 执行更新
   命令行：npm update

关于package.json

什么是package.json

package.json是项目的配置文件，里面可以包含项目的名字，版本号，项目的描述，git仓库，关键字，作者，依赖的包等等，但是至少要包含项目的名字，版本号，是可以手工创建的，但是也可以用NPM自动创建。

package.json使用好处

分享包的时候可以删除node_modules（这里面放着各种项目使用到的包）,然后使用命令行npm install，就会根据package.json里面的内容自动安装包

自动创建package.json

命令行：npm init
解释：输入命令行之后会问你几个问题，不一定每个都要回答可以直接回车，然后yes完成创建。

分析与使用package.json

• 第一次创建后的package.json

{
  "name": "simplejan-web",
  "version": "1.0.0",
  "description": "none",
  "repository": "none",
  "readme": "README.md",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "UNLICENSED",
  "dependencies": {
    "bootstrap": "^3.3.6",
    "bootstrap-material-design": "^0.5.9",
    "snackbarjs": "^1.1.0",
    "nouislider": "^6.2.0",
    "jquery": "*"
  },
 "devDependencies":{
},
}

^这个符号代表的是只能更新版本号第二位数字，改为~可以只能更新第三位，只有*代表更新到最新

• dependencies与devDependencies
  两者标识的是不同的依赖，dependencies是运行本项目所依赖的包，而devDependencies是用于开发时需要的模块，包括一些用于开发测试的模块

• 添加dependencies 依赖

  命令行： npm install bootstrap --save

• 添加devDependencies 依赖

  命令行：npm install webpack --save-dev

  "dependencies": {
    "bootstrap": "^3.3.6",
    "bootstrap-material-design": "^0.5.9",
    "jquery": "^1.10.2",
    "nouislider": "^6.2.0",
    "snackbarjs": "^1.1.0"
  },
  "devDependencies": {
    "webpack": "^1.12.14"
  }
}

• 删除的时候对应的package.json配置也删除

  命令行：npm uninstall webpack --save-dev
  解释：区别在于--save-dev 和--save

NPM进阶

npm link

npm link命令是可以将模块安装到全局，这样你自己这个私有的包就可以在全局使用啦，详细用法见NPM Link

package.json

NPM 脚本 - "scripts"

{
  // package.json
  "scripts": {
    "build": "node index.js"
  }
}

当执行npm run build的时候，相当于执行了node index.js，好处多多，比如用于项目的自动构建打包等，有一篇详细的文章见 npm scripts 使用指南

命令行可执行模块 "bin"

//package.json 
{
...
 "bin": {
    "mx": "./mx.js"
  }
  ...
  }

用来执行各个内部命令对应的可执行文件的位置。比如在命令行中执行mx,就会执行mx.js，
这个有什么用？举个例子前端扫盲-之打造一个Node命令行工具

---

参考资料

宁皓网
InfoQ
前端扫盲-之打造一个Node命令行工具
NPM的特殊使用