Yarn 3.5中如何引入JS/CSS依赖文件？

一、PnP模式下引入Bootstrap、jQuery等前端依赖 #

Yarn 3的PnP模式不会生成传统的node_modules目录，依赖文件默认存储在本地Yarn缓存（路径为~/.yarn/cache），但直接引用缓存文件不适合前端项目，推荐两种实用方案：

1. 拷贝依赖静态资源到项目可访问目录 #

用yarn dlx调用copyfiles工具，将依赖中的静态文件（如css、js）复制到项目的public/assets这类web可访问目录：

• 拷贝Bootstrap的资源：

  yarn dlx copyfiles node_modules/bootstrap/dist/**/* public/assets/bootstrap/
  

• 拷贝jQuery：

  yarn dlx copyfiles node_modules/jquery/dist/*.js public/assets/jquery/
  

  完成后即可在HTML中用常规标签引入：

  <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
  <script src="/assets/jquery/jquery.min.js"></script>
  <script src="/assets/bootstrap/js/bootstrap.bundle.min.js"></script>
  

  注：PnP模式下dlx会自动解析依赖路径，无需生成实际的node_modules。

2. 通过构建工具集成（推荐） #

如果项目使用Webpack、Vite等构建工具，它们原生支持Yarn PnP，直接在源码中导入即可：

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import 'bootstrap';

构建工具会通过PnP机制自动定位依赖文件，打包到最终产物中，无需手动处理路径。

二、迁移/重命名node_modules（仅适用于nodeLinker: node-modules模式） #

若你需要保留node_modules并调整其位置，可在.yarnrc.yml中配置：

nodeLinker: node-modules
modulesFolder: "./public/node_modules"

执行yarn install重新安装后，依赖会直接部署到public/node_modules目录，原有HTML中的路径（如/node_modules/bootstrap/...）无需修改，web服务器会自动从public目录读取资源。

注：Yarn官方虽不推荐依赖node_modules，但该方案可快速兼容现有项目的路径习惯。

内容的提问来源于stack exchange，提问作者John Crest