MERN同仓项目如何配置shared共享包供前后端引用且变更无需重装

优先使用包管理器内置的Workspace功能，这是目前Monorepo场景下处理内部包依赖的标准方案，完全满足你的两个需求：既可以把shared作为正规依赖引用，修改shared代码也能实时同步无需重装。

具体实现步骤 #

步骤1：配置Workspace #

首先在根目录的package.json中添加workspaces字段，声明所有子包路径：

{
  "name": "my-project-root",
  "private": true,
  "workspaces": [
    "./backend",
    "./frontend",
    "./shared"
  ]
}

如果使用pnpm作为包管理器，还需要在根目录新增pnpm-workspace.yaml文件，内容如下：

packages:
  - './backend'
  - './frontend'
  - './shared'

步骤2：配置shared包的标识 #

打开shared/package.json，给内部包定义唯一的名称（可以加作用域避免和公共包重名）：

{
  "name": "@my-project/shared",
  "version": "1.0.0",
  "main": "index.js",
  // 其他原有配置
}

步骤3：在前后端项目中添加依赖 #

分别打开backend/package.json和frontend/package.json，在dependencies字段中添加对shared包的依赖：

{
  "dependencies": {
    // 其他原有依赖
    "@my-project/shared": "workspace:*"
  }
}

workspace:*是workspace的专用语法，会自动匹配本地shared包的最新版本，不需要手动更新版本号。

步骤4：执行一次安装 #

在项目根目录执行对应包管理器的安装命令：

• npm: npm install
• yarn: yarn install
• pnpm: pnpm install

安装完成后，包管理器会自动给backend和frontend的node_modules中创建@my-project/shared的软链接，指向根目录的shared文件夹，所有shared的代码修改会实时同步到前后端，不需要重复安装依赖。

备选方案：临时软链接（npm link） #

如果不想改动根目录配置做全量Monorepo改造，可以用npm link做临时软链：

1. 进入shared目录，执行npm link，将本地shared包注册到全局
2. 分别进入backend、frontend目录，执行npm link @my-project/shared，把全局注册的shared包软链到当前项目的node_modules中

该方案适合临时测试使用，团队协作场景下还是更推荐Workspace方案。

注意事项 #

• 如果前端使用Vite、CRA等构建工具，需要将@my-project/shared纳入编译范围，避免ES语法不兼容问题：
  • Vite可在vite.config.js中添加配置：optimizeDeps: { include: ['@my-project/shared'] }
  • 如果使用TypeScript，可在根目录tsconfig.json中配置paths别名，获得实时类型提示：

    {
      "compilerOptions": {
        "paths": {
          "@my-project/shared": ["./shared/index.js"]
        }
      }
    }
    

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