NPM使用手册

时间 2019-12-04

标签 npm 使用手册繁體版

原文原文链接

NPM是什么

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

使用准备

安装Node前端

安装完毕能够node -v 查看版本号node
安装NPM
命令行：npm install npm --global
解释：--global为全局安装的意思，整个电脑环境均可以使用，-g是全局安装简写jquery

使用NPM

安装指定包

1. 全局安装

命令行：npm install webpack --global

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

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

命令行:npm install webpack

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

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

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

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

4.安装制定版本

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

删除指定包

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

查看

查看项目安装了哪些包
命令行：npm list
查看某个包的信息
命令行： npm info bootstrap

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

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

更新

检查更新
命令行：npm outdated
更新限定
在package.json里面会被限制更新的版本号，见下文
执行更新
命令行：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的特殊使用