npm常用知识汇总

npm 是随 Node.js 一起安装的包管理工具,它的一个很重要的作用就是:将开发者从繁琐的包管理工作中解放出来,使开发者更加专注于功能的开发。

安装/更新

npm 不需要单独安装,在安装 Node 时,会连带一起安装 npm。但 Node 附带的 npm 可能不是最新版本,需要运行 npm install npm@latest -g 更新到最新版本。因在国内 访问、下载 npm 包太慢,可设置淘宝镜像。

  • 设置淘宝镜像 npm i -g cnpm --registry=https://registry.npm.taobao.org
    • npm config get registry 查看镜像是否配置成功
  • 更新最新版本 npm i npm@latest -g

npm 使用

npm init

npm init 初始化生成一个新的 package.json 。它会向用户提一系列 配置问题。使用参数 -f(force),-y(yes),则跳过提问阶段,用默认变量 直接生成 package.json

npm set

  • npm config list -l,查看 npm 配置信息

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $ npm config list -l
    ; cli configs
    long = true
    metrics-registry = "https://registry.npmjs.org/"
    scope = ""
    user-agent = "npm/6.4.1 node/v8.14.0 win32 x64"
    init-author-email = ""
    init-author-name = ""
    init-author-url = ""
    init-license = "ISC"
    init-module = "C:\\Users\\14335\\.npm-init.js"
    init-version = "1.0.0"

  • npm set 用来设置 npm 的配置信息,这些信息会存放在主用户目录的~/.npmrc文件。

    1
    2
    3
    4
    5
    6
    7
    8
    $ npm set init-author-email "1433539514@qq.com"
    $ npm set init-author-name "better-jiang"
    $ npm set init-license 'MIT'

    $ cat ~/.npmrc
    init-author-email=1433539514@qq.com
    init-author-name=better-jiang
    init-license=MIT

    npm set 设置之后,再 npm init, package.json中作者姓名、邮件、许可就会自动写入预设的值。

npm info

npm info 命令查看模块的具体信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$ npm info vue

vue@2.6.7 | MIT | deps: none | versions: 247
Reactive, component-oriented view layer for modern web interfaces.
https://github.com/vuejs/vue#readme

keywords: vue

dist
.tarball: https://registry.npmjs.org/vue/-/vue-2.6.7.tgz
.shasum: 254f188e7621d2d19ee28d0c0442c6d21b53ae2d
.integrity: sha512-g7ADfQ82QU+j6F/bVDioVQf2ccIMYLuR4E8ev+RsDBlmwRkhGO3HhgF4PF9vpwjdPpxyb1zzLur2nQ2oIMAMEg==
.unpackedSize: 3.0 MB

maintainers:
- yyx990803 <yyx990803@gmail.com>

dist-tags:
beta: 2.6.0-beta.3 csp: 1.0.28-csp latest: 2.6.7

published 4 days ago by yyx990803 <yyx990803@gmail.com>

npm search 命令在 npm 仓库 搜索相关内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$ npm search  vue

NAME | DESCRIPTION | AUTHOR | DATE | VERSION | KEYWORDS
vue | Reactive,… | =yyx990803 | 2019-02-21 | 2.6.7 | vue
vue-router | Official router for… | =posva… | 2018-11-23 | 3.0.2 | vue router routing
vuex | state management… | =yyx990803 | 2019-01-17 | 3.1.0 |
eslint-plugin-vue | Official ESLint… | =chrisvfritz… | 2019-02-18 | 5.2.2 | eslint eslint-plugin eslint-config vue vuejs rules
bootstrap-vue | BootstrapVue… | =pi0… | 2019-02-19 | 2.0.0-r… | Bootstrap Bootstrap 4 Bootstrap for Vue SSR Web Components Directives Polymer Vue VueJS Vue2 WebCo
mpo
vue-i18n | Internationalization… | =kazupon | 2019-02-17 | 8.8.2 | i18n internationalization plugin vue vue.js
vuetify | Vue.js 2 Semantic… | =amajesticpota… | 2019-02-19 | 1.5.2 |
vue-style-loader | Vue.js style loader… | =yyx990803 | 2018-08-13 | 4.1.2 |
vue-meta | manage page meta… | =alexchopin… | 2018-12-18 | 1.5.8 | attribute google head helmet info meta seo server ssr title universal vue
vue-multiselect | Multiselect… | =shentao | 2018-10-03 | 2.1.3 |
vue-class-component | ES201X/TypeScript… | =ktsn… | 2019-02-19 | 7.0.1 | vue class babel typescript
@vue/eslint-config-standa | eslint-config-stand… | =akryum =soda… | 2018-10-30 | 4.0.0 | vue cli
rd | | | | |
vue-chartjs | Vue.js wrapper for… | =apertureless | 2018-08-04 | 3.4.0 | ChartJs Vue Visualisation Wrapper Charts
@vue/eslint-config-pretti | eslint-config-prett… | =akryum =soda… | 2018-11-12 | 4.0.1 | vue cli
er | | | | |
vue-hot-reload-api | hot reload api for… | =yyx990803 | 2019-02-22 | 2.3.3 | vue hot reload
vue-resource | The HTTP client for… | =steffans… | 2018-05-20 | 1.5.1 | vue xhr http ajax
@vue/eslint-config-airbnb | eslint-config-airbnb… | =akryum =soda… | 2018-10-30 | 4.0.0 | vue cli
vue-eslint-parser | The ESLint custom… | =mysticatea | 2019-02-10 | 6.0.2 |
@vue/component-compiler-u | Lower level… | =akryum… | 2019-02-21 | 2.6.0 | vue sfc component compiler
tils | | | | |
vue-property-decorator | property decorators… | =kaorun343 | 2019-01-11 | 7.3.0 | vue typescript decorator

npm list

  • npm list 以树形结构列出当前项目已安装的所有模块,以及它们的依赖
  • npm list -global, 列出全局安装的模块
  • npm list vue, 列出指定模块
  • npm list -prod, dependencies中的模块 依赖树
  • npm list -dev, devDependencies的模块 依赖树

npm install

  • 本地 / 全局 安装
    默认情况下,npm会从 http://npmjs.org 搜索或下载包,并将包安装到当前目录的node_modules子目录下。
    • 本地安装,是指将一个模块下载到当前目录的node_modules子目录,然后只有在项目目录中,才能调用该模块
  • 全局安装,一般来讲,只适用于工具模块,比如webpack,gulp,eslint。

| 模式 | require 引入使用 | 注册PATH |
| ——– | —————- | ——– | |
| 本地模式 | 是 | 否 |
| 全局模式 | 否 | 是 |
注意⚠️:安装之前,npm install会先检查,node_modules目录是否已经存在指定模块,如果存在,就不重新安装了,即使远程仓库已经有一个新版本。
如果希望,不过是否安装过,都要强制重新安装,可是有-f--force参数

1
$ npm install <package name> --force
  • 安装不同版本
    1
    2
    3
    4
    5
    $ npm install vue-router@2.8.1  // 2.8.1 版本 

    $ npm install vue-router@latest // 最新版本

    $ npm install vue-router@^2.7.0 // 2.7.0及以后的版本
    • 版本范围
      • version, 必须是准确版本号
      • >version, 大于指定版本号
      • >=version,大于等于版本号
      • <version, 小于版本号
      • <=version, 小于等于版本号
      • ~version, 约等于办本号
      • ^version,最小的版本号,向后兼容
      • 1.2.X, 1.2这个大版本,1.2.0,2.2.4,etc, but no 1.3.0
      • version1 - version2, >=version1 <=version2
  • 依赖类型(dependencies, devDependencies)
    • dependencies 依赖,是指该项目所依赖的js模块,当他人引用此包时,该依赖下的模块也会被下载
    • devDependencies 依赖,只是在开发环境中需要用到的,在他人引用时不会被下载。
  • npm install,默认会下载安装dependencies和devDependencies中的所有模块,如果使用--production 参数,只会下载安装 dependencies下的模块

    npm run

    npm 不仅可以用于模块管理,还可以执行脚本。package.json文件中有一个scripts字段,可用于指定脚本命令,供npm直接调用。
    • scripts, 就是一些脚本代码,可以通过 npm run script-key来调用, npm run 是其简写。
      • npm run,不加参数,直接运行,会列出package.json中所有可以执行的脚本命令。
      • 运行bash脚本
        在写scripts属性中的命令,也可以在node_modules/.bin目录中直接写成bash脚本

        npm bin

        npm bin命令显示当前项目的,Node模块的可执行脚本所在的目录(即.bin目录)

        npm root

        npm root [-g],查看【全局的】包的安装路径

        常用命令

        1
        2
        3
        4
        5
        6
        7
        8
        9
        npm help   // 查看npm 命令列表
        npm -l // 查看 npm命令的简单用法
        npm version // 查看npm node 等版本
        npm help [command] // 查看某命令 详细用法
        npm list --depth=0 [-g] // 查看[全局]本地安装的包
        npm view <package name> // 查看指定包的信息
        npm search [search key] // 搜索相关的npm包
        npm update [-g] [package name] // 升级当前项目指定模块
        npm config list // 查看配置信息