By

文章目录
  1. 1. NPM
    1. 1.1. 0. NPM 是什么
    2. 1.2. 1. NPM basic commands
      1. 1.2.1. npm install
      2. 1.2.2. npm update
      3. 1.2.3. npm outdated
      4. 1.2.4. npm config
    3. 1.3. 2. NPM package.json
      1. 1.3.1. 描述信息类的
      2. 1.3.2. 版本管理
      3. 1.3.3. 入口
      4. 1.3.4. 依赖库
        1. 1.3.4.1. 依赖库的格式
          1. 1.3.4.1.1. git url 的格式
      5. 1.3.5. 脚本
    4. 1.4. 3. NPM node_modules
      1. 1.4.1. 什么是 node_modules?
      2. 1.4.2. 满足 node_modules 的几种情况
    5. 1.5. 4. 语义化版本号
      1. 1.5.1. 主版本号.次版本号.修订号
      2. 1.5.2. package.json 中指定版本
        1. 1.5.2.1. 指定修订号不变
      3. 1.5.3. 指定次版本号不变
      4. 1.5.4. 不限制版本号
      5. 1.5.5. npm version
      6. 1.5.6. 锁定当前项目的所有依赖的版本号
      7. 1.5.7. 参考
      8. 1.5.8. 5. 其他常见问题
        1. 1.5.8.1. (1) node_modules 的查找顺序 的顺序
        2. 1.5.8.2. (2) Vue.js 使用 的 import from
        3. 1.5.8.3. (3) Resolving EACCES permissions errors when installing packages globally

NPM

0. NPM 是什么

  1. JavaScript Package Manager
  2. 只是一个node.js 项目，npm lib 下的一个单独项目

1. NPM basic commands

列出所有可用命令

1
npm -l

查找 help

1
npm help <xxx>

npm install

1
2
3
4
5
npm install # install all base on package.json and package-lock.json
npm install <xxx> # default install
npm install <xxx> --save #npm 5.0.0 之后这个参数就不必要了
npm install <xxx> --no-save # install and not modify package.json
npm i <xxxx> --save # i same with install
1
2
npm unistall <xxx>
npm rm <xxx>

npm update

1
2
npm update #
npm update <xxx>

npm outdated

1
2
npm outdated 
npm outdated -g

npm config

1
2
3
4
npm config set registry https://registry.npm.taobao.org 
npm config list
npm config delete registry
npm config ls

npmrc

2. NPM package.json

描述信息类的

  1. name
  2. version
  3. description
  4. keywords

版本管理

  1. repository {type: , url: }

入口

  1. main (唯一必要的字段)

依赖库

  1. dependencies
  2. devDependencies

依赖库的格式

  1. 一个包含 package.json的文件夹
  2. 一个包含（1）的 gzipped 文件
  3. 一个 指向（2）的 url
  4. 一个 注册在 registry 的 <name>@<version> 标识，由这个标识可以找到（3）的 url
  5. 一个 指向 （4）的标识 <name>@<tag>
  6. 一个 tag 为 latest 指向（5）<name> 标识
  7. 一个 git repo 的 url，能clone 后内容为（1）的文件夹
git url 的格式

脚本

  1. scripts
1
2
3
4
5
6
"scripts": {
    "init": "npm install --registry https://registry.npm.taobao.org",
    "help": "node build/tools/help.js",
    "route": "node build/router.js",
    "new": "node build/tools/new.js"
  },
1
2
3
npm help run # 所有的 script 都是被 run的，查看 run 的文档，可以知道详细用法
npm run start <xxx>
npm start <xxx> # 省略掉 run 也可以

3. NPM node_modules

什么是 node_modules?

一个可以被node.js require 函数引用的的文件夹或者文件。

满足 node_modules 的几种情况

  1. 一个包含 package.json 的文件夹，且 package.json 必须要有 main 字段
  2. 一个包含 index.js 的文件夹
  3. 一个 单个的 js 文件

4. 语义化版本号

主版本号.次版本号.修订号

  • 主版本号：当你做了不兼容的 API 修改，(major)
  • 次版本号：当你做了向下兼容的功能性新增，(minor)
  • 修订号：当你做了向下兼容的问题修正。(patch)

package.json 中指定版本

指定修订号不变

1
2
3
1.0 #不指定修订号，则随着 npm update 自动增加
1.0.x # 用 x 指代修订号
~1.0.4 # 用~ 符号来控制只更新修订号

指定次版本号不变

1
2
3
1 # 只指定主版本号
1.x # x 指代次版本号
^1.0.4 # ^ 符号控制次版本号变更

不限制版本号

1
2
* #是使用星好表示不限制
x #使用 x 表示不限制

npm version

1
2
3
npm version major # 为自己的库增加主版本号
npm version minor # 为自己的库增加次版本号
npm version patch # 为自己的库增加修订号

锁定当前项目的所有依赖的版本号

1
npm shrinkwrap #锁定后 npm install 不再去找更新了

Additionally, if both package-lock.json and npm-shrinkwrap.json are present in a package root, package-lock.json will be ignored in favor of this file.

npm-shrinkwrap.json

参考

语义化版本号
npm 语义化版本号文档
npm semver calculator

5. 其他常见问题

(1) node_modules 的查找顺序 的顺序

加入 用户的项目开发目录为 '/home/ry/projects/foo.js', 需要找 require 的为

  1. 先查找项目下的 node_modules 
1
/home/ry/projects/node_modules/bar.js
  1. 再依次查找用户的目录
1
2
3
4
5
6
/home/ry/node_modules/bar.js
/home/node_modules/bar.js
/node_modules/bar.js
$HOME/.node_modules # $HOME变量下的目录
$HOME/.node_libraries
$PREFIX/lib/node # $PREFIX is Node.js's configured node_prefix.

Node.js modules

(2) Vue.js 使用 的 import from

  1. ./ ../ 开头的是文件夹路径
  2. 直接目录名或者文件名开头的，是注册了 webpack 的 reslove alias 的库

第三方库 通过 npm 安装到node_modules 下，所以 webpack 的配置文件里，并没有用 ./node_modules 开头，而是直接使用 vue 、vue-router等库的名字开头，不在 node_modules 目录下，则需要配置绝对路径。

总结就是 npm 下载 -》webpack 注册 -》vue 代码中再 import

JavaScript import

Webpack Relove alias

(3) Resolving EACCES permissions errors when installing packages globally

排查错误

1
2
3
4
10754 ◯ : which npm                                                                                                         
/Users/fosteryin/n/bin/npm
10764 ◯ : npm root                                                                                                             
/Users/fosteryin/node_modules

解决方案：

  1. 使用一个 node.js version manager 来安装 node.js
  2. 手动修改安装路径到有权限的目录

Using a node version manager to install nodejs and npm

文章目录
  1. 1. NPM
    1. 1.1. 0. NPM 是什么
    2. 1.2. 1. NPM basic commands
      1. 1.2.1. npm install
      2. 1.2.2. npm update
      3. 1.2.3. npm outdated
      4. 1.2.4. npm config
    3. 1.3. 2. NPM package.json
      1. 1.3.1. 描述信息类的
      2. 1.3.2. 版本管理
      3. 1.3.3. 入口
      4. 1.3.4. 依赖库
        1. 1.3.4.1. 依赖库的格式
          1. 1.3.4.1.1. git url 的格式
      5. 1.3.5. 脚本
    4. 1.4. 3. NPM node_modules
      1. 1.4.1. 什么是 node_modules?
      2. 1.4.2. 满足 node_modules 的几种情况
    5. 1.5. 4. 语义化版本号
      1. 1.5.1. 主版本号.次版本号.修订号
      2. 1.5.2. package.json 中指定版本
        1. 1.5.2.1. 指定修订号不变
      3. 1.5.3. 指定次版本号不变
      4. 1.5.4. 不限制版本号
      5. 1.5.5. npm version
      6. 1.5.6. 锁定当前项目的所有依赖的版本号
      7. 1.5.7. 参考
      8. 1.5.8. 5. 其他常见问题
        1. 1.5.8.1. (1) node_modules 的查找顺序 的顺序
        2. 1.5.8.2. (2) Vue.js 使用 的 import from
        3. 1.5.8.3. (3) Resolving EACCES permissions errors when installing packages globally