NPM Workspaces React项目中跨工作区引用资源的推荐方案

步骤1：配置assets工作区的package.json #

首先在assets/目录下创建合法的package.json，将其声明为可被其他工作区引用的私有包：

{
  "name": "@your-project/assets",
  "version": "1.0.0",
  "private": true,
  "exports": {
    "./public/*": "./public/*"
  }
}

• private: true 确保这个包仅在本地工作区使用，不会被发布到npm
• exports 字段明确了可被外部访问的资源路径，让导入逻辑更清晰可控

步骤2：关联assets与package1工作区 #

先确认根目录的package.json已包含所有工作区：

{
  "workspaces": [
    "assets",
    "package1",
    "package2"
  ]
}

然后在根目录执行命令，将assets包安装为package1的依赖：

npm install @your-project/assets --workspace=package1

步骤3：在package1中引用图片资源 #

现在可以直接通过包名在React组件中导入图片，无需写冗长的相对路径：

import logo from '@your-project/assets/public/logo.png';

export default function Package1Component() {
  return <img src={logo} alt="项目Logo" />;
}

推荐理由 #

• 路径统一：不管子工作区的目录结构如何调整，导入路径始终保持一致
• 符合官方规范：利用npm工作区的包引用机制，避免自定义配置带来的维护成本
• 兼容主流工具：Create React App、Vite等React开发工具都原生支持从npm包导入静态资源，无需额外配置

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