JS包管理

包与包管理

模块化，包管理，外加现代构建工具，这三样东西共同构成了前端工程化的基础，从此之后使用前端开发大型应用成为了可能，而包管理就是其中承上启下的一环
什么是包？

包是一个或多个js的集合，一个工程可以是包，通俗的讲，我们在项目中所使用到的依赖就是包，依赖可以是一个完整的框架，如Vue或React，也可以是一个很小的工具库，如mockJS，jQuery，我们通常将这些由别人编写，我们使用的包叫做第三方库

什么是包管理器？

显而易见的是，每个包可能都会或多或少的依赖其他第三方库，这些被依赖的第三方库可能本身也会依赖其他第三方库，如果去手动维护这些依赖关系是十分复杂的，而包管理器就能自动帮助我们维护这些依赖关系

基于包管理，我们可以很轻松的下载安装卸载我们所需的包而不需要关心其中的依赖，如果在这些包之中有着重复的依赖，包管理器也能检测出来并处理

接下来我将以npm这个最著名的包管理器来作为例子

安装与卸载

在使用npm前，我们必须确保自己的电脑中已经安装了npm
打开控制台，输入npm -v，如果输出npm的版本号则代表电脑里已经安装好了npm

如果没有安装则需要先去安装node

node官网
node中文网
安装node的过程中会自动安装npm
安装过程不再赘述

全局安装

在npm中，包有两种安装方式，一种是全局安装，全局安装会将包下载到一个全局的位置，全局安装后的包此电脑上的所有工程都能使用
只有使用到某些全局命令时才会使用全局安装
全局安装的指令为

npm install -g xxx@版本号
1

其中xxx为包名，install可以简写为i，@版本号可以省略不写，默认安装最新版本，即

npm i -g xxx
1

本地安装

npm的第二种安装方式就是本地安装，本地安装会将包下载到当前工程根目录下的node_modules文件夹下，
我们日常开发中的包绝大部分都是本地安装
和全局安装不同的是，本地安装会根据开发环境的不同衍生出以下两个安装方式

1. 开发依赖
开发依赖即只有在开发环境才会被打包的依赖，通常这种依赖在生产环境下是要被去除的
   安装一个开发依赖很简单

   npm i -D xxx
   1

   其中xxx为包名

2. 普通依赖
   这种依赖意味着无论是开发环境还是生产环境都需要使用到的，在打包的时候都需要被囊括进去
   本地安装默认安装为普通依赖

   npm i xxx
   1

   其中xxx为包名

卸载

卸载npm中的包很简单，如果是全局安装的话需要使用以下命令

npm uninstall -g xxx
1

如果是本地安装的话则需要使用以下命令

npm uninstall xxx
1

根据需要我们可以选择性的使用-D参数

npm uninstall -D xxx
1

package.json

一般而言，我们每次开启一个新项目时都需要使用npm来初始化项目

npm init
1

此时npm会让我们输入一些信息来完善项目，比如项目名等
我们可以使用npm init -y来跳过这些步骤
这行命令会帮我们生成一个叫package.json的文件

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "axios": "^1.4.0",
  },
  "devDependencies": {
    "vite": "^4.4.6"
  }
  "keywords": [],
  "author": "",
  "license": "ISC"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这段json中，main代表了整个程序的入口文件是哪个，之后进行打包的时候也会通过这个文件来分析依赖
scripts为执行命令，通过npm run xxx来调用
dependencies则是本地普通依赖，在这里的依赖无论是在开发环境还是在生产环境都会被打包
devDependencies则是本地开发依赖，在这里的依赖只会在开发环境被打包，生产环境则会忽略这里面的包