Проблема с использованием ссылки пряжи для использования локального пакета npm с peerDependencies

Question

Я сталкиваюсь со следующей проблемой при попытке разработки библиотеки компонентов React с использованием styled-components,

Для целей этого примера давайте предположим, что у нас есть два репозитория, app а также core и это core будет потребляться app,

В настоящее время, core написан на TypeScript и построен с использованием tsc,

Чтобы быстро повторить, я попытался использовать yarn link связывать core в app,

Это прекрасно работает для изготовления app находить core... проблема, с которой я сталкиваюсь, это когда скомпилированный код TypeScript core пытается потребовать пакет, скажем styled-components, он пытается найти этот пакет в node_modules из core (не из app). Так как у меня есть styled-components как peerDependency и devDependency, он может найти его в core"s node_modulesНо это не то, чего я хочу. Я хотел бы использовать styled-components из app,

Одна альтернатива yarn link Я попытался, добавив зависимость core в app с помощью file:/path, Кажется, это работает, как ожидалось, но создает новые проблемы. Как я могу иметь путь моей машины разработки, существующей в package.json только для местного развития (без постоянного переключения туда-сюда)? Кроме того, кажется, что любые обновления, сделанные в core требует, чтобы пакет был удален из appи очистить кэш пряжи перед ее повторным добавлением.

Есть ли более простой способ заставить этот сценарий работать? Я только начал рассматривать Rollup или Webpack как решение, но не уверен, что это верное направление.

Answer 1

это не решение пряжи ссылку.

но решение для всех, у кого есть проблемы с управлением локальными репозиториями с помощью yarn а также npm

просто используйте yalc для управления вашими локальными пакетами вместо yarn link или же yarn add link:...

Answer 2

Нам понадобится библиотека стилизованных компонентов в devDependencies основного репо, поскольку она требуется для разработки повторно используемых компонентов в основном репо.

В то же время нам нужно будет указать репо приложения для загрузки peerDependencies основного репо из node_modules репозитория приложения.

Для этого мы можем использовать webpack. Например, если мы использовали сценарии реакции для создания репозитория приложения, мы можем запустить yarn eject и найти webpack.config.js в папке config и изменить раздел resolve.alias.

приложение / config / webpack.config.js

      {
  ...
  resolve: {
    ...
    alias: {
      ...
      core: path.resolve("./node_modules/core") // path must be imported above.
    }  
  }
}

Подробнее: https://blog.maximeheckel.com/posts/duplicate-dependencies-npm-link.

Answer 3

У меня была аналогичная проблема, когда добавление пакета через в проект могло нарушить несвязанные вещи (тогда как два проекта работали нормально сами по себе, или если бы я использовал пакет безyarn link).

Я думаю, это потому, что зависимости связанного пакета будут иметь приоритет (возможно, эта проблема ), и они использовали версии, отличные от зависимостей моего основного приложения. у меня было"typescript": "^4.2.3"в моем основном приложении, но"typescript": "^4.6.3"в связанном пакете. ^позволит моему основному приложению разрешить эту зависимость от версии в связанном пакете, нарушив машинописный текст в основном приложении. Это сбивало с толку, потому что в основном проекте не было никаких изменений.yarn.lockэто указывало бы на то, чтоtypescriptверсия изменена.

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

Answer 4

Как вы сказали, машинопись решает это "неправильно".

Чтобы преодолеть это, скажите машинописному тексту разрешить проблемные пакеты в пользовательском node_modules в tsconfig.json > compilerOptions > paths вот так:

    "paths": {
      "rxjs/*": ["node_modules/rxjs/*"],
    }

Также см. Этот пост для получения дополнительной информации.