Сбой компиляции проектов React в MonoRepo - PullRequest
Новая
       3

Сбой компиляции проектов React в MonoRepo

0 голосов
/ 04 марта 2020

Я пытаюсь настроить рабочие области пряжи с моим экземпляром docker. Это моя структура каталогов: 

/monorepo/
  /node_modules/
        @libs/common
        @services/common
        @services/project-A
        ...OTHER DEPS...
  package.json
  /services/
      /common/
         index.jsx
         package.json
      /project-A/  
           webpack.base.config.js
           **REACT project with babel, webpack, etc**

  /libs/
     /tools/
         /common/
            index.jsx
            package.json

Чтобы упростить мою настройку docker, я только что настроил этот том в моем docker compose, который отображает весь каталог monorepo: 

volumes:
      - '../../../monorepo:/monorepo'

From там в моем Project-A я импортирую @ libs / common и @ services / common. Это прекрасно работает, когда обычные библиотеки экспортируют простые функции, такие как:

export const Add = (a,b) => a+b

У Webpack нет проблем с решением этой проблемы и сборкой Project-A.

Однако, когда я пытаюсь импортировать компонент из одной из общих библиотек, как это: 

/libs/tools/common: 

      import React from 'react' 
      export MySharedComponent = () => <>HELLLO</>

Я получаю ошибку в процессе сборки: 

 Error: Cannot find module '/monorepo/libs/tools/common/webpack.base.config.js'
Require stack:
- /monorepo/node_modules/eslint-import-resolver-webpack/index.js
- /monorepo/node_modules/eslint-module-utils/resolve.js
- /monorepo/node_modules/eslint-plugin-import/lib/rules/no-unresolved.js
- /monorepo/node_modules/eslint-plugin-import/lib/index.js

Файл eslint в Project-A: 

{
    "parser": "babel-eslint",
    "env": {
      "browser": true,
      "node": true,
      "jest": true,
      "cypress/globals": true
    },
    "settings": {
      "import/resolver": {
        "webpack": {
          "config": "webpack.base.config.js"
        }
      }
    }
  }

babel.r c в Project-A 

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-react",
    "@babel/preset-flow"
  ],
  "env": {
    "test": {
      "plugins": [
        [
          "babel-plugin-webpack-alias",
          {
            "config": "./webpack.base.config.js"
          }
        ]
      ]
    }
  }
}

Мой вопрос:

  • Основная проблема в том, что в общих репозиториях не настроена конфигурация webpack. Поэтому рабочая область не знает, как скомпилировать мои общие ресурсы?

  • Должна ли быть только 1 конфигурация сборки веб-пакета в моей рабочей области, используемая всеми проектами в рабочей области? В настоящее время у меня есть только 1 конфиг под Project-A?

  • Что произойдет, если у меня есть определенные c потребности веб-пакетов для каждого проекта, имеет ли смысл 1 конфигурация (если это ответ)?

1 Ответ

0 голосов
/ 04 марта 2020

1) Сначала , в вашем коде есть строка, на которую вы ссылаетесь webpack.base.config.js в babelrc и eslint,

, так что если этот файл не существует, эта ошибка, которая говорит, что модуль не найден, имеет смысл.

2) Второй : если вы строите и используете свои репозитории в одной и той же ситуации и среде, да, вы можете иметь одну конфигурацию для обоих но вам может потребоваться настройка среды (Development, Production) для вашей конфигурации. Но если вы действительно хотите разделить свои зависимости и конфигурации, веб-пакет поддерживает несколько записей для вашего проекта, который вы можете проверить.

...