NPM使用手册

1

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文件

webpack CLI

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的特殊使用

你可能感兴趣的

载入中...