Компиляция проектов React в MonoRepo не удалась

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

/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

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

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

Оттуда в моем 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.rc в рамках 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"
          }
        ]
      ]
    }
  }
}

Мой вопрос:

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

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

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


person Batman    schedule 04.03.2020    source источник


Ответы (1)


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

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

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

person Hamid Osouli    schedule 04.03.2020
comment
Итак, webpack.base.config существует, но он находится в Project-A, однако я пытаюсь связать «Проект-А», который опирается на @libs/common, я получаю сообщение об ошибке, говорящее, что webpack.base.config.js не ниже @libs/common. Однако веб-пакет не должен просто использовать конфигурацию из Project-A. Я не думаю, что несколько записей являются решением этой проблемы. - person Batman; 04.03.2020
comment
Или, если бы вы могли привести пример о записях, которые могли бы помочь мне понять, что вы имеете в виду. - person Batman; 04.03.2020
comment
@Batman Каждый раз, когда веб-пакет хочет загрузить файл или модуль, который вы пытаетесь импортировать, он передает этот файл промежуточному программному обеспечению на основе каталога, в котором находится файл. Таким образом, ваш относительный проход тоже может быть неправильным (webpack.base.config. js). Конечно, несколько записей не являются решением вашего вопроса. Я думаю, вам не нужно несколько файлов конфигурации, но это было бы так, если бы вы этого захотели. - person Hamid Osouli; 04.03.2020
comment
Когда вы говорите мой относительный пропуск, я полагаю, вы имеете в виду мой файл babelrc, где у меня есть "./webpack.base.config.js"? Итак, вместо того, чтобы искать конфигурацию веб-пакета под project-a, он ищет ее относительно libs/tools/common? Это то, что вы имеете в виду? - person Batman; 04.03.2020
comment
@Batman Предположим, у вас есть 2 отдельных приложения с разными файлами и папками, которые также имеют общую общую библиотеку, вы создаете 2 записи веб-пакета, помещаете общие модули в общую папку, и обе записи используют эту общую библиотеку. Вы можете поискать детали. - person Hamid Osouli; 04.03.2020
comment
@Batman Я думал, что в eslint.rc webpack.base.confg.js может быть неправильным, пожалуйста, измените его на ./ чтобы проверить это - person Hamid Osouli; 04.03.2020
comment
Не имеет значения - person Batman; 04.03.2020