十三、前端包管理工具详解

覆水难收呀

已于 2023-08-22 21:55:43 修改

阅读量985

点赞数

分类专栏：前端Vue 文章标签：前端

于 2023-07-16 20:57:37 首次发布

本文链接：https://blog.csdn.net/sean_0819/article/details/131708274

版权

前端Vue 专栏收录该内容

18 篇文章 4 订阅

订阅专栏

一、代码共享方案

我们已经学习了在JavaScript中可以通过模块化的方式将代码划分成一个个小的结构：

在以后的开发中我们就可以通过模块化的方式来封装自己的代码，并且封装成一个工具；

这个工具我们可以让同事通过导入的方式来使用，甚至你可以分享给世界各地的程序员来使用；

那如果我们分享给世界上所有的程序员使用，有哪些方式呢？

二、包管理工具npm

包管理工具npm：

Node Package Manage，也就是Node包管理器；
但是目前已经不仅仅是Node包管理器了，在前端项目中我们也在使用它来管理依赖的包；
比如vue、vue-router、vuex、express、koa、react、react-dom、axios、babel、webpack等等；

如何下载和安装npm工具呢？

npm属于node的一个管理工具，所以我们需要先安装Node；
node管理工具：https//nodejs.org/en/，安装Node的过程会自动安装npm工具；

npm管理的包可以在哪里查看、搜索呢？

https://www.npmjs.org/
这是我们安装相关的npm包的官网；

npm管理的包存放在哪里呢？

我们发布自己的包其实是发布到registry上面的；
当我们安装一个包时其实是从register上面下载的包；

npm下载的包存放在哪里？

通过npm install xxx下载包，会自动生成一个node_modules文件夹，该目录下面会有一个dayjs文件。
node_modules里面的dayjs目录下，有个package.json，里面有个配置 "main": "dayjs.min.js",此时如果我们想要导入dayjs的话，也就是导出 "dayjs.min.js"。

三、npm的配置文件

那么对于一个项目来说，我们如何使用npm来管理这么多包呢？

事实上，我们每一个项目都会有一个对应的配置文件，无论是前端项目（Vue、React）还是后端项目（Node）；
这个配置文件会记录着你项目的名称、版本号、项目描述等；
也会记录着你项目所依赖的其他库的信息和依赖库的版本号；

这个配置文件就是package.json

那么这个配置文件如何得到呢？

方式一：手动从零创建项目，npm init -y
方式二：通过脚手架创建项目，脚手架会帮助我们生成package.json，并且里面有相关的配置。

四、常见的配置文件

五、常见的属性

必须填写的属性：name、 version

name是项目的名称；
version是当前项目的版本号；
description是描述信息，很多时候是作为项目的基本描述；
author是作者相关信息（发布时用到）；
license是开源协议（发布时用到）；

private属性：

private属性记录当前的项目是否是私有的；
当值为true时，npm是不可能发布它的，这是防止私有项目或模块发布出去的方式；

main属性：

设置程序的入口。

比如我们使用axios模块 const axios = require("axios")；
如果有main属性，实际上是找到对应的main属性查找文件的；

scripts属性：

scripts属性用于配置一些脚本命令，以键值对的形式存在；
配置后我们可以通过npm run命令的key来执行这个命令；
npm start和npm run start的区别是什么？它们是等价的；对于常用的 start、 test、stop、restart可以省略掉run直接通过 npm start等方式运行；自定义的key不能省略run哈。

dependencies属性

dependencies属性是指定无论开发环境还是生成环境都需要依赖的包；
通常是我们项目实际开发用到的一些库模块vue、vuex、vue-router、react、react-dom、axios等等；
与之对应的是devDependencies；
用法：平常我们在把自己的代码发给其他的同事的时候，不会把node_module这个文件打包发给同事，因为这个文件包太大了，那同事拿到这个项目之后没有这些依赖咋办。在package.json里面有个dependencies，里面有我们安装的依赖包，然后在命令行直接npm install 就行，后面什么都不跟，就会默认下载dependencies里面标明的包。是不是很方便。

devDependencies属性

一些包在生产环境是不需要的，比如webpack、babel等；
这个时候我们会通过 npm install webpack --save-dev，将它安装到devDependencies属性中；

peerDependencies属性

还有一种项目依赖关系是对等依赖，也就是你依赖的一个包，它必须是以另外一个宿主包为前提的；
比如element-plus是依赖于vue3的，ant design是依赖于react、react-dom；

注意：

如果开发环境和生产环境都会依赖某个包的话比如说是axios，那我们该去怎么安装呢？

npm install axios --save ， --save可以省略
那如果我们只是在开发环境需要用到的库，该去怎么安装呢？举个例子我们假如需要安装babel（什么是babel，babel是对我们代码进行转换的，所以生产环境不需要用到babel），
npm install babel --save-dev 或者这么写 npm install babel -D

六、依赖的版本管理

◼ 我们会发现安装的依赖版本出现：^2.0.3或~2.0.3，这是什么意思呢？

◼ npm的包通常需要遵从semver版本规范：

 semver：语义化版本 2.0.0 | Semantic Versioning

 npm semver：https://docs.npmjs.com/misc/semver

◼ semver版本规范是X.Y.Z：

 X主版本号（major）：当你做了不兼容的 API 修改（可能不兼容之前的版本）；

 Y次版本号（minor）：当你做了向下兼容的功能性新增（新功能增加，但是兼容之前的版本）；

 Z修订号（patch）：当你做了向下兼容的问题修正（没有新功能，修复了之前版本的bug）；

◼ 我们这里解释一下 ^和~的区别：

 x.y.z：表示一个明确的版本号；

 ^x.y.z：表示x是保持不变的，y和z永远安装最新的版本；

 ~x.y.z：表示x和y保持不变的，z永远安装最新的版本；

◼ engines属性

 engines属性用于指定Node和NPM的版本号；

 在安装的过程中，会先检查对应的引擎版本，如果不符合就会报错；

 事实上也可以指定所在的操作系统 "os" : [ "darwin", "linux" ]，只是很少用到；

◼ browserslist属性

 用于配置打包后的JavaScript浏览器的兼容情况，参考；

 否则我们需要手动的添加polyfills来让支持某些语法；

 也就是说它是为webpack等打包工具服务的一个属性（这里不是详细讲解webpack等工具的工作原理，所以不再给出详情）；

七、npm install 命令

安装npm包分两种情况：

 全局安装（global install）： npm install webpack -g;

 项目（局部）安装（local install）： npm install webpack

◼ 全局安装

 全局安装是直接将某个包安装到全局：

 比如全局安装yarn：

◼ 但是很多人对全局安装有一些误会：

 通常使用npm全局安装的包都是一些工具包：yarn、webpack等；

 并不是类似于 axios、express、koa等库文件；

 所以全局安装了之后并不能让我们在所有的项目中使用 axios等库；

（1）项目安装

项目安装会在当前目录下生成一个 node_modules 文件夹，我们之前讲解require查找顺序时有讲解过这个包在什么情况下被 查找；

◼ 局部安装分为开发时依赖和生产时依赖：

# 默认安装开发和生产依赖

npm install axios

npm i axios

# 开发依赖

npm install webpack --save-dev

npm install webpack -D

npm i webpack –D

# 根据package.json中的依赖包

npm install

（2）npm install 原理

（3）package-lock.json

（4）npm其他命令

八、yarn工具

npm install yarn -g 下载yarn

yarn --version 查看yarn版本号

yarn init 或者 yarn init -y 生成package.json文件

安装包怎么安装？yarn add axios dayjs

yarn怎么配脚本？其实跟npm差不多

九、cnpm工具

如果我们不设置npm的镜像，怕以后淘宝镜像有问题了不能下载了，后面还得重新设置npm的镜像，那这个时候我们就可以使用cnpm，用之前先安装一下。

npm install cnpm -g 全局安装

npm install -g cnpm --registry=https://registry.npm.taobao.org 安装的时候去改变镜像地址

cnpm config set registry=https://registry.npm.taobao.org 安装好了以后去改变镜像地址

这个时候npm所对应的仓库就是官方仓库，cnpm所对应的仓库就是你配的淘宝镜像服务器。

十、npx工具

方法二的举例：

其实"scripts"里面对应写的"build": "npx webpack"，其中npx可以省略，

结论：我们package.json里面的scripts里面执行某一个命令，他优先就是在当前项目目录下的node_modules里面去找。

十一、dist目录

上面我们本地安装webpack之后，在当前项目目录下执行webpack，会自动生成一个dist目录，这个是什么目录，这个其实就是distribution（发布）。

通过我们现在的位置，通过对wepack对我们的项目进行一个打包。

类似于我们在搞一个vue项目的时候，通过命令npm run build会对我们项目进行一个打包，这个时候也会去生成一个目录结构dist。当前dist目录下的代码就是我们打包之后的代码，很明显代码被压缩了，代码文件会变得更小。

注意：如果我们npm工具里面没有默认将npx给他集成，不能直接敲webpack这个命令，因为你这个时候敲webpack的时候相当于在使用全局的webpack。

十二、npm发布自己的包

来个🌰栗子~

06_wq_utils目录是我写的简单的工具，这个时候我们想让别人能下载到我写的这个工具，这个时候我们就要把我们写的工具发布到npm registry仓库。

那如果我们想要发布这么一个工具的话怎么办呢？

首先我们进入到这个目录下，我们得保证这个目录下必须有package.json文件，这个文件记录了我们项目的名称，项目的版本等等重要信息。所以我们下一步操作就是npm init -y

接着我们需要有个npm账号，没有的话自己去创建一个。有了账号之后，我们需要登录一下npm login，输入账号密码，然后输入验证码登录成功。

然后npm publish上传。通过你写的关键字就能搜索到

然后我们下载下来就是npm install wq_utils 。

然后我们将项目打包，先看自己有没有webpack

npx webpack --version 查看webpack版本

然后npx webpack执行打包发现警告，"The 'mode' option has not been set, webpack will fallback to 'production' for this value."（这只是一个警告，可以暂时不管，也能打包成功）

或者我们需要去添加一个webpack.config.js文件

webpack.config.js文件内容如下，入口文件配置记得改成自己的项目的入口文件配置。

然后执行npx webpack，打包成功。

const path = require("path") //引入path

module.exports = {
  //项目入口文件配置
  entry: "./src/main.js",
  //项目出口文件配置
  output: {
    path: path.join(__dirname, "./dist"),
    filename: "bundle.js",
  },
  //解决标题错误的配置
  mode: "development", //production
}