Можно ли использовать разные node_modules в проекте для backend и frontend на TypeScript в VS Code?

Question

[ThinDrew]

Структура проекта, в моём представлении, должна выглядеть примерно так:

- Services
-- Backend
--- node_modules
--- Service_1
--- Service_2
-- Frontend
--- node_modules
--- App_1

Структуру я повторил, но сервисы не видят своих модулей. Не понимаю, возможно, как настроить package.json или tsconfig.json у проектов.

Корневой package.json:

{
    "name": "monorepo",
    "version": "1.0.0",
    "private": true,
    "workspaces": [
        "backend",
        "frontend"
    ],
    "devDependencies": {
        "typescript": "^4.0.0"
    }
}

package.json в папке Backend:

{
    "name": "backend",
    "private": true,
    "workspaces": [
      "./Service1",
      "./Service2",
      "./Service3"
    ],
    "scripts": {
    "build:Service1": "tsc -b Service1",
    "build:Service2": "tsc -b Service2",
    "build:Service3": "tsc -b Service3"
  },
    "dependencies": {
      "typescript": "^4.5.0"
    }
  }

tsconfig.config одного из сервисов:

{
    "compilerOptions": {
      "module": "commonjs",
      "target": "es6",
      "lib": ["es2015","dom"],
      "moduleResolution": "node",
      "sourceMap": true,
      "outDir": "../../../dist/BackEnd/Service1",
      "baseUrl": ".", // Где сам проект находится
      "paths": {
        "*": ["../node_modules/*", "src/types/*"]
      },
    },
    "include": ["src/**/*"],
    "exclude": ["../node_modules"]
  }

Сервис успешно билдится, но при запуске уже говорит, что не видит модуль.

Comments

[Александр]

Насколько помню, настройка workspac'ов не так выглядит. Для примера можно посмотреть на turborepo.

Answer 1

[Ильнур Ибаутллин]

Проще разнести frontend и backend в разные директории, как это уже сделано, и в корне проекта убрать package.json.
сами проекты собирать переходя в нужные директории, как будто это две разные репозитории
в целом, проще не смешивать их, ведь случаи когда фронтендер что-то коммитит в бекенд или наоборот довольно редки, и даже если будет коммит, то бекендеру проще это отследить и понимать что происходило в git log

Comments

[ThinDrew]

Да, я в итоге так и сделал. Для backend написал такой package.json:

{
    "name": "backend",
    "private": true,
    "workspaces": [
        "Service1",
        "Service2",
        "Service3"
    ],
    "dependencies": {
        "shared": "file:../Shared"
    }
}

И делая npm install, находясь в папке backend, устанавливаются модули в эту же папку сразу для всех проектов.