npm 常见命令使用

npm 常见命令使用

安装

// 被添加到 package.json 的 dependencies 字段
npm install --save <package_name>

// 被添加到 package.json 的 devDependencies 字段
npm install --save--dev <package_name>
  
// 全局安装
npm install -g <package_name>

注意：

1. 在 Mac 上全局安装目录为 /usr/local/lib/node_modules ，在windows 上全局安装目录为 C:\Program Files\nodejs\node_modules

2. 可以使用以下命令查看 node 命令目录

   # mac 下默认 会输出 /usr/local/bin/node
   which node
   

更新

# 更新本目录下指定的包，或者全部包
npm update <package_name>
# 列出本目录可升级的包
npm outdated
# 更新全局下指定的包，或者全部包
npm update -g <package_name>
# 列出全局可升级的包
npm outdated -g

卸载

# 卸载 
npm unstall <package_name>

# 全局卸载
npm unstall -g <package_name>

作用域包

命名规则

// 其中 scope 为作用域，project-name 就为项目名
@scope/project-name

// 其中每一个 npm 用户的用户名也可以 为作用域
@username/project-name

创建

// 在package.json 中可以使用
{
	"name": "@wangj/test-project"
}

使用

// 在package.json下
{
  "dependencies": {
    "@wangj/test-project": "^1.0.0"
  }
}

// 或者使用命令行 
npm install @wangj/test-project --save

注意：要求 npm版本 >= 2

npm 指令执行原理

背景：

使用一些比较流行的前端库的时候，经常能看到在安装后，可以在命令行中执行一些他们自定义的命令，例如：

vue-cli、webpack 等，那他们是怎么实现的？

创建自己的 npm cli 命令

1. 首先在package.json 中添加 bin 字段，指定命令对应的执行文件, 其中 command-name 为命令名， ./index.js 是执行对应文件

// package.json
{
	"name": "wj-cli",
  "bin": {
    "command-name": "./index.js" 
  },
  ...
}

2. index.js 文件内容如下

#!/usr/bin/env node

console.log('command-name 执行了');

背后原理

macOs 下：

1. 全局安装👆自定义的包时，npm 会把 package.json 的 bin 字段中定义的 命令名作为软连接（指向该字段对应的文件地址 ）加入到 系统 $path 中， 也就是 /usr/local/bin/下。
2. 每当我们在 terminal 中输入该命令时，也就相对于执行了 该命令对应的 js 文件。
3. 但是我们在上面的 js 文件中能够看到 第一行代码并不是 js 代码，执行后并不会报错，这是因为 node 对这行 shebang 做了特殊处理。

Windows 下：

1. 在 系统路径下生成了一个 command-name.cmd 命名的文件，而windows 在执行时可以 不输入 cmd 后缀就可以执行 cmd 文件

npx 使用

背景： 常常使用一些 npm 命令时候需要全局安装，才能在命令行中使用该全局命令，例如常见： webpack 、vue-cli 、babel-cli 等等，都需要先全局安装然后才能使用，假如需要运行当前目录下的一些命令，需要 /node_modules/.bin/*** 调用本目录下的命令。

作用： 可以使用 npx 直接调用当前目录下的命令或者全局的命令，而无需安装。

原理： 使用 npx 调用命令时，会先检查 本地 /node_modules/.bin/ 下 和 $path 目录下是否有该命令，如果有则调用，没有的话则会在一个临时目录安装改命令 npm 包，运行后删除。