文件命名

  • img-1.jpg, img-2.jpg 等文件被分割到不同文件夹中,是因为 Vite 对资源进行了哈希处理,以避免缓存问题。
  • modalSlide.css 文件夹 包含了 CSS 文件。这是因为 Vite 对 CSS 进行了代码分割。
  • modulepreload-polyfill 文件夹 是用来支持模块预加载的 polyfill。

资源的拆分

  • Swiper 被单独输出是因为它是一个独立的模块,并且被识别为大文件需要单独打包。
  • GSAP 被整合进 ugcSlide.js 是因为它可能被认为是一个较小的依赖,没有单独打包的必要。

在每次构建之前,确保清理构建输出目录。你可以在构建脚本中添加清理命令:

1.安装 rimraf:

npm install rimraf --save-dev

2. 在 package.json 中的构建脚本中添加清理命令:

"scripts": {
  "clean": "rimraf dist",
  "build": "npm run clean && vite build"
}

运行构建命令

rm -rf node_modules
npm install

Run Vite Build with Debug: Run Vite build with the debug flag to get more detailed logs.

DEBUG=vite:* npm run build

清除缓存并重试

尝试清除构建缓存并重新构建项目:

rm -rf node_modules/.vite
npm run build

Yarn 是 JavaScript 的软件包管理器,由 Facebook 与其他公司合作开发,旨在解决 npm(Node 软件包管理器)的一些不足之处。它以速度、可靠性和安全性著称。

常见的 Yarn 命令
以下是一些常见的 Yarn 命令及其 npm 对应命令:

初始化新项目

yarn init

等同于 npm init

添加软件包

yarn add [package-name]

Equivalent to npm install [package-name] --save

Add a Package as a Dev Dependency

yarn add [package-name] --dev

Remove a Package

yarn remove [package-name]

Equivalent to npm uninstall [package-name] --save

Install All Dependencies

yarn install

Equivalent to npm install

Update a Package

yarn upgrade [package-name]

Equivalent to npm update [package-name]

Run a Script

yarn run [script]

List Installed Packages

yarn list

使用场景

  • 速度和效率: Yarn 会并行安装软件包,与 npm 相比,它能显著加快安装进程,尤其是在依赖关系较多的项目中。

  • 可靠性: Yarn 使用锁文件(yarn.lock)来确保在每台机器上都安装了完全相同的依赖项。这有助于避免 “在我的机器上能用 ”的问题。

  • 安全性 在执行代码前,Yarn 使用校验和来验证每个已安装软件包的完整性。