前端工程化之：包管理器处理

概念

一、什么是包？

包 package 是一个或多个js模块的集合，它们共同完成某一类功能。
可以简单的认为每一个工程就是一个包。
有些包是为了给别人用的，这种包也叫第三方库。

二、什么是包管理器？

包管理器是一个管理包的工具，前端常见的包管理器有 npm 、 yarn 、 cnpm 、 pnpm 等。 npm 工具目前只能在node环境下使用。

包管理器具备以下能力：

让开发者可以轻松的下载包
让开发者可以轻松的升级和卸载包
能够自动管理包的依赖

查看 npm 版本命令：

npm -v // 8.5.0

（1）配置源

npm官网：

https://www.npmjs.com/

① 查看源

npm config get registry

② 配置淘宝镜像源

npm config set registry https://registry.npm.taobao.org

③ 配置官方源

npm config set registry https://registry.npmjs.org/

（2）初始化

初始化会生成一个 package.json 文件

npm init // 初始化工程，帮助生成package.json文件

npm init -y // 初始化工程，全部使用默认配置生成package.json文件

（3）默认生成的 package.json

scripts 为项目运行的脚本，下面代码中通过 npm run test 来运行脚本 test 后面 "echo "Error: no test specified" && exit 1" 的内容。

可以根据需求配置不同的脚本来运行不同的内容。比如：运行、打包等。

注：当脚本名字为 start 时，运行命令可以省略 run ，为 npm start 。

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

（4）安装

查看包所有版本：

npm view 包名 versions // view 可替换为v

// 例：
npm v moment versions

// 运行结果
[                                                  
  '1.0.0',  '1.0.1',  '1.1.0',  '1.1.1',  '1.2.0', 
  '1.3.0',  '1.4.0',  '1.5.0',  '1.5.1',  '1.6.0', 
  '1.6.1',  '1.6.2',  '1.7.0',  '1.7.1',  '1.7.2', 
  '2.0.0',  '2.1.0',  '2.2.1',  '2.3.0',  '2.3.1', 
  '2.4.0',  '2.5.0',  '2.5.1',  '2.6.0',  '2.7.0', 
  '2.8.1',  '2.8.2',  '2.8.3',  '2.8.4',  '2.9.0', 
  '2.10.2', '2.10.3', '2.10.5', '2.10.6', '2.11.0',
  '2.11.1', '2.11.2', '2.12.0', '2.13.0', '2.14.0',
  '2.14.1', '2.15.0', '2.15.1', '2.15.2', '2.16.0',
  '2.17.0', '2.17.1', '2.18.0', '2.18.1', '2.19.0',
  '2.19.1', '2.19.2', '2.19.3', '2.19.4', '2.20.0',
  '2.20.1', '2.21.0', '2.22.0', '2.22.1', '2.22.2',
  '2.23.0', '2.24.0', '2.25.0', '2.25.1', '2.25.2',
  '2.25.3', '2.26.0', '2.27.0', '2.28.0', '2.29.0',
  '2.29.1', '2.29.2', '2.29.3', '2.29.4', '2.30.0',
  '2.30.1'
]

安装分为 本地安装 和 全局安装 。

① 本地安装有两种：

安装普通依赖（最常见）：程序运行起来需要用到的依赖为普通依赖。

安装开发依赖：不是运行的时候要用，开发时需要用到的，代码一旦写完就用不到了的依赖。例：npm i -D @types/node，为node环境下开发时智能提示依赖包。

安装会将包下载到当前命令行所在目录的 node_modules 中。

绝大部分安装都使用本地安装。

npm install 包名 // install 可替换为 i

npm install --save 包名

npm install 包名@版本号

若仅作为开发依赖，则添加参数 -D

npm i -D 包名

npm i -D 包名@版本号

本地安装包的 package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": { // 为本地安装的普通依赖包
    "lodash": "^4.17.21",
    "mockjs": "^1.1.0"
  },
  "devDependencies": { // 为本地安装的开发依赖包
    "@types/node": "^20.11.5"
  }
}

② 全局安装

会将包下载到一个全局的位置。

只有需要使用某个全局命令时，才需要进行全局安装。

npm i -g 包名

npm i -g 包名@版本号

（5）卸载

① 本地卸载

npm uninstall 包名 // uninstall 可替换为 un

// 例：卸载lodash
npm un lodash

② 全局卸载

npm uninstall -g 包名

// 例：全局卸载moment
npm un -g moment

（6）引入包： lodash

node查找包的顺序：

查找是否有内置模块 lodash ；
查找当前目录的 node_modules 中是否有 lodash ；
依次查找上级目录的 node_modules 中是否有 lodash ，直到根目录。

require("包名")

// 例：引入lodash包
const _ = require("lodash")

console.log(_.chunk([2,3,4,5],2)) // [ [ 2, 3 ], [ 4, 5 ] ]

三、什么是 cli

cli 是一个命令行工具，它提供一个终端命令，通过该命令可以完成一些功能。

概念