Npm依赖包升级

上一篇文章介绍了vue-cli和create-vue两款vue脚手架，现在官方已经推荐使用creat-vue进行项目的构建，知道cli是基于webpack构建的，每次都需要全部打包构建，而vite就不需要，所以vite速度是更快的。

还得说一下，因为今天用vue-cli脚手架生成项目，发现上篇文章说最后版本是5.0.7是不对的哈，抱歉，应该是停留在2022年7月7日的V5.0.8版本。

那么对于一些以前基于webpack的vue应用项目，如果转向vite，应用代码是需要改动的，如果项目比较复杂的话，就还是比较麻烦。么如何从Vue CLI迁移到Vite的内容，我需要另写一篇来介绍，感兴趣的可以先看下这篇内容： https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/

那么，如果是vue cli创建的项目，那么npm依赖包的更新是必要的。所以来分享如何进行依赖包的更新。

npm更新依赖包：

先看下package.json中的版本基础知识：

1、依赖包的版本号使用的是语义化版本规范（Semantic Versioning），也称为SemVer。这个规范定义了版本号的格式和含义，它由三个部分组成：主版本号、次版本号和修订号。

major 表示非兼容的重大 API 改变（主要的）意味着对于之前的代码可能会有破坏性的变化。当你升级MAJOR版本号时，你需要进行仔细的测试和适应性修改。

minor 表示向后兼容的功能性改变（次要的）

patch 表示向后兼容的 bug 修正（修补的）

2、符号

^符号（Caret符号）：使用^符号指定的版本范围允许安装指定的依赖包的兼容更新版本。兼容更新版本指的是在主版本号不变的情况下，可以安装较新的次要版本和修补版本。例如，如果依赖包的版本号为^1.2.3，那么在安装时，可以安装任何1.x.x系列的更新版本，如1.3.0、1.4.0，但不会安装2.0.0版本。这样做是为了确保你的项目在安装依赖包时可以获得修复了错误和增加了功能的更新版本。

符号（波浪线符号）：使用符号指定的版本范围允许安装指定的依赖包的最新的修补版本，但不包括次要版本的更新。也就是说，当依赖包的版本号为~1.2.3时，可以安装任何1.2.x系列的修补版本，如1.2.4、1.2.5，但不会安装1.3.0版本。这种方式适合在你对依赖包的更新较为谨慎，只希望获得修复了错误的版本时使用。

3、查看可更新的包以及已安装的依赖包 npm outdated npm list

4、安装更新

  • 使用npm update 会按照package.json中的规则安装到最新版

  • 使用npm-check-updates npm install npm-check-updates -g

检查可更新 ncu 更新 ncu -u [packageName]

三种区别：

npm update [packageName] 会同步更新 package-lock.json 文件中对应的包的版本，不需要重新安装 npm 包。

npm-check-updates 和 npm-check更新 package.json 文件中可更新的安装包，但不会更新对应的 package-lock.json 文件中对应的包的版本。 所以需要删除lock文件重新安装： rm -rf package-lock.json && npm i

踩坑分享：

将使用基于webpack创建的项目迁移到基于vite的想目，运行出现这个报错 require is not defined

初步猜想应该可能与使用Vite创建项目时导致的差异有关。Vite 是一个基于 ES modules 的构建工具，它使用浏览器原生的模块系统，而不依赖于像 Webpack 这样的打包工具。

Vite 项目的构建和模块处理方式与 Webpack 不同，因此在从 Webpack 迁移到 Vite 的过程中，可能需要对代码进行一些调整。

https://cn.vitejs.dev/guide/assets.html

服务时引入一个静态资源会返回解析后的公共路径：

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

所以代码可以改成：

 <img :src="../assets/logo.png" />
前端开发