Vue3学习笔记- NPM包管理工具

ゝ一纸荒年。 2022-11-15 03:48 296阅读 0赞

> **导语**  
>   这篇分享是关于Vue3 系列的学习知识的整理的开始，能够对大家学习带来帮助。也是对自己能力的一种提升。

### 学习大纲 ###

*   *  认识NPM
     *  安装NPM
     *  使用NPM
     *  NPM中级用法
     *  了解package.json文件
     *  package.json 文件详解
     *  NPM包使用
     *  模块的基本应用
     *  NPM 和yarn的对比和迁移

## 认识NPM ##

NPM （全称Node Package Manager也就是Node包管理器）是Node.js默认的、以JavaScript 编写的软件包管理系统。通过NPM来分享和使用代码已经成了前端的标配，它的官网是 https://www.npmjs.com。类似于Maven 是世界上最大的软件注册列表系统。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25paHVpMTIz_size_16_color_FFFFFF_t_70_pic_center]

在编写程序的时候，有很多相同的重复功能，也就是说天下代码一大抄，既然出现了这种情况，就可以通过一种统一的管理工具将这些重复的内容高质量的管理起来。类似于Maven，为Java开发者和Android开发者提供了很多的公共的使用的高质量的代码管理。

## 安装NPM ##

NPM是Node.js 默认的软件包管理系统，安装Node.js完毕之后，会默认的进行安装NPM，NPM本身也是基于Node.js 开发的软件。

Node 下载地址 https://nodejs.org/en/

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25paHVpMTIz_size_16_color_FFFFFF_t_70]

关于NPM在不同操作环境上的安装方式，可以通过搜索引擎找到对应的安装方式

## 使用NPM ##

安装完成NPM之后如何去使用它呢？加入需要在项目中安装一个JQuery就到NPM官网上去进行查找。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25paHVpMTIz_size_16_color_FFFFFF_t_70 1]  
**安装**  
  在使用安装的时候，我们需要知道在哪个项目目录下使用，首先需要知道对应的项目路径，在哪个路径下面执行了命令，就会默认把那个目录当做是项目路径来使用

npm install jquery -g

![在这里插入图片描述][2021033022101886.png]  
  执行完成之后可以查看当前的安装路径中的内容。会发现路径里面是空的，这里为什么会没有呢，是因为使用了-g，将内容安装到了全局。这里如果将-g 去掉之后就会在默认的项目中进行安装。

npm install jquery

![在这里插入图片描述][20210330221320102.png]  
  这个时候会发现这个路径下面会有一些不一样的东西出现，这里出现了三个文件，一个是文件夹内容，剩余的两个是包管理的JSON文件。

**查看安装镜像**

npm config get registry

![在这里插入图片描述][2021033022165416.png]

**设置镜像**

npm config set registry [指定的安装镜像路径] --global 全局安装
    
    npm config set registry https://registry.npm.taobao.org
    
    npm config set registry https://registry.npm.taobao.org
    npm i -g express

**使用nrm工具切换淘宝源**

npx nrm use taobao

## NPM中级用法 ##

*  npm -v 通过查看版本，看npm是否安装成功
 *  npm install < Module Name > 使用npm 命令安装模块 可以使用 @ 符来指定版本号
 *  npm install < Module Name > -g 可以直接对模块进行全局的安装
 *  npm list -g 查看所有全局安装的模块
 *  npm list vue 查看某个模块的版本号
 *  npm -g install npm@5.9.1 通过这种方式来更新npm版本
 *  npm install -save moduleName \# -save 在package 文件的dependencies节点写入依赖
 *  npm install -save-dev moduleName \# -save-dev 在package 文件的devDependencies节点写入依赖
 *  devDependencies：开发时的依赖，里面的模块是开发的时候进行使用的，发布的时候用不到它，例如项目中使用gulp,压缩css、js的模块，这些模块在项目部署之后是不需要的。

## 了解package.json文件 ##

{ 
      "name": "npminstall", // 项目名
      "version": "1.0.0", // 版本号
      "description": "test", // 包描述
      "main": "index.js", // 主入口文件
      "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",// 开发者
      "license": "ISC"
    }

## package.json 文件详解 ##

使用了npm install juery -save 命令之后，会在目录中产生一个package-lock.json 的文件，内容如下。这个被称为是锁文件，它是根据package.json文件生成的

{ 
      "name": "npminstall",
      "version": "1.0.0",
      "lockfileVersion": 2,
      "requires": true,
      "packages": { 
        "": { 
          "version": "1.0.0",
          "license": "ISC",
          "dependencies": { 
            "jquery": "^3.6.0"
          }
        },
        "node_modules/jquery": { 
          "version": "3.6.0",
          "resolved": "https://registry.npm.taobao.org/jquery/download/jquery-3.6.0.tgz",
          "integrity": "sha1-xyoJ8Vwb3OFC9J2/EXC9+K2sJHA="
        }
      },
      "dependencies": { 
        "jquery": { 
          "version": "3.6.0",
          "resolved": "https://registry.npm.taobao.org/jquery/download/jquery-3.6.0.tgz",
          "integrity": "sha1-xyoJ8Vwb3OFC9J2/EXC9+K2sJHA="
        }
      }
    }

package.json 文件内容如下

{ 
      "name": "npminstall",
      "version": "1.0.0",
      "description": "test",
      "main": "index.js",
      "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "dependencies": { 
        "jquery": "^3.6.0"
      }
    }

package.json 文件中的版本号的说明，安装的时候代表不同的含义：

*  “5.0.3” 表示安装指定的 5.0.3 版本
 *  “~5.0.3” 表示安装5.0.x中最新的版本
 *  “^ 5.0.3” 表示安装5.x.x 中最新的版本

## NPM包使用 ##

在项目路径下创建index.html 文件进行使用如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25paHVpMTIz_size_16_color_FFFFFF_t_70 2]  
  在index.html文件中引入对应的jquery的依赖，内容如下，在没有webpack都是通过这样的方式来添加到对应的HTML文件中

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    </head>
    <body>
    
    <script> $(function () { alert("hello") }) </script>
    </body>
    </html>

const $  = require('jquery')
    
    let num = require("./foo")
    
    console.log(num)

![在这里插入图片描述][20210331210251962.png]

## 模块的基本应用 ##

**babel的使用**

*  使用NPM全局安装babel-cli包。
 *  找一个目录，用npm来初始化一个项目，用来搭建环境
 *  babel 提供了一个编译工具babel-node,也可以通过这个工具执行js代码
 *  在项目路径下新建 .babelrc 文件

> \{  
> “presets”:\[“es2015”,“stage-2”\],  
> “plugins”:\[“transform-runtime”\]  
> \}

*  
 *  安装需要的库
 *  > npm install babel-core babel-preset-es2015 babel-plugin-transform-runtime bable-preset-stage2 -save-dev
 *  编写运行脚本 build : babel src -w -d lilb
 *  新建src目录和lib目录，不然编译的时候回报错
 *  命令行输入npm run build

## NPM 和yarn的对比和迁移 ##

**Yarn是什么**  
  "Yarn 是由Facebook、Google、Exponent 和Tilde"联合推出的一个新的JS包管理工具，Yarn 是为了弥补npm 的一些缺陷而出现的，因为NPM5以前会出现下面的问题

*  npm install 的时候很慢，
 *  同一个项目多人开发的时候，由于安装的版本不一致出现bug

**Yarn 的安装**

*  下载node.js 使用npm 安装
 *  npm install -g yarn
 *  安装node.js 下载yarn的安装程序
 *  Yarn淘宝源安装
 *  yarn config set registry https://registry.npm.taobao.org -g
 *  yarn config set sass\_binary\_site http://cdn.npm.taobao.org/dist/node-sass -g

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25paHVpMTIz_size_16_color_FFFFFF_t_70 3]  
**yarn 使用**

> yarn add < Module Name > 添加模块  
> yarn add < Module Name > -dev 开发依赖  
> yarn remove < Module Name> 移除依赖

*  yarn init //初始化项目执行输入信息后，会生成package.json文件
 *  yarn install // 安装package.json 里所有包，并将包及它的所有依赖项保存进yarn.lock
 *  yarn install --flat // 安装一个包的单一版本
 *  yarn install --force //强制重新下载所有包
 *  yarn install --production //只安装dependencies里的包
 *  yarn install --no-lockfile // 不读取或生成yarn.lock
 *  yarn iinstall --pure-lockfile //不生成 yarn.lock
 *  yarn add \[package\] //安装包
 *  yarn add \[package\]@\[version\] //指定版本安装
 *  yarn add \[package\]@\[tag\] // 安装某个tag
 *  yarn add --dev/-D //添加不同的依赖项
 *  yarn add --peer/-P
 *  yarn add --optional/-O
 *  yarn add --exact/-E //安装包的精确版本
 *  yarn add --tilde/-T // 安装包的次要版本里的最新版本
 *  yarn publish //发布包
 *  yarn remove 移除一个包
 *  yarn upgrade 更新一个依赖
 *  yarn run 运行脚本
 *  yarn info 查询包信息
 *  yarn cache 缓存
 *  yarn cache list 列出已缓存的每个包
 *  yarn cache dir 返回全局缓存位置
 *  yarn cache clean 清除缓存

**Yarn的优点**

*  速度快
 *  安装版本统一
 *  更简洁的输出
 *  多注册来源处理
 *  更好的语义化

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25paHVpMTIz_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/ee98bba54360444496672360ce8c9865.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25paHVpMTIz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210330215536534.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25paHVpMTIz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25paHVpMTIz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210330220456757.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25paHVpMTIz,size_16,color_FFFFFF,t_70
[2021033022101886.png]: https://img-blog.csdnimg.cn/2021033022101886.png
[20210330221320102.png]: https://img-blog.csdnimg.cn/20210330221320102.png
[2021033022165416.png]: https://img-blog.csdnimg.cn/2021033022165416.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25paHVpMTIz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2021033120550439.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25paHVpMTIz,size_16,color_FFFFFF,t_70
[20210331210251962.png]: https://img-blog.csdnimg.cn/20210331210251962.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25paHVpMTIz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210331221728147.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25paHVpMTIz,size_16,color_FFFFFF,t_70