Каков правильный способ добавления зависимости для реакции в вашем пакете .json для реагирующего компонента

Ответ 1

Для многоразовых компонентов:

• Положите зависимость react как в peerDependencies, так и в devDependencies.
• Никогда введите react зависимость в dependencies.

peerDependencies указывает, какие версии React ваш повторно используемый компонент поддерживает/требует. При использовании npm 2 это также добавляет React в список модулей, которые будут установлены, но это больше не относится к npm 3.

devDependencies гарантирует, что React будет установлен при запуске npm install при разработке вашего компонента или при выполнении тестов на Travis или аналогичных.

Ввод react в dependencies приведет к установке нескольких версий React, если кто-то использует ваш компонент, но имеет другую версию React в своем собственном package.json - имея несколько версий React, не только раздувает сборку, но также вызывает ошибки, когда разные версии пытаются взаимодействовать.

Ответ 2

Выбранный ответ определенно является предписанным здесь, однако я начал одобрять использование инверсии управления, а не полагаться на одноранговые зависимости npm для зависимостей между моими библиотеками, и это хорошо мне помогло.

Библиотеки проще, если вы их создаете. Кажется, что проще поддерживать библиотеки, которые экспортируют одну функцию, которая принимает объект со всеми их тяжелыми зависимостями и экспортирует объект, содержащий каждый из ваших типичных экспортных библиотек.

Библиотека 'injected'

Библиотека /index.js

export default ({ React }) => {
  const InjectedComponent = props => (
    <p style={{color: props.color}}>This component has no React npm dependencies.</p>
  )

  /** other stuff */

  return { InjectedComponent }
}

Потребление приложения

app.js

import React from 'react'
import { render } from 'react-dom

/** Import the default export factory from our library */
import createInjectedComponent from 'injected'

/** Call the factory, passing its dependencies (guaranteed to match what we're bundling) and get back our component */
const { InjectedComponent } = createInjectedComponent({ React })

render(<InjectedComponent color="blue" />, document.getElementById('root'))

Если ваш компонент работает только с определенной версией реакции или какой-либо другой зависимостью, вы можете написать некоторые утверждения вокруг версии для параметра React, который передается. В целом, создание библиотек таким образом должно быть менее подвержено новой сборке выпущенные в любой момент версии React, публикуются и, что еще важнее, гарантируют, что вы не будете заставлять своих пользователей библиотеки связывать несколько версий React и других тяжелых библиотек. Этот шаблон хорошо работает с ссылкой на npm (обычно у меня, как правило, 16+ библиотек, запущенных из npm-ссылки одновременно и с проблемами, когда я не использовал этот шаблон).

В вашем основном приложении я бы рекомендовал всегда разделять реакцию, реагировать на dom и любые взаимодействующие компоненты lib, которые вы используете в комплекте поставщиков (webpack), и пометить его как внешний в своем основном пакете, чтобы вы случайно не объединили две версии.

Ответ 3

У вас может быть react в peerDependencies или в dependencies. Разница заключается в том, что с peerDependencies, react устанавливается только один раз для пакета, используя ваш пакет. Если вы поместите его в dependencies, react будет установлен дважды, один раз для пакета с вашим пакетом и один раз для вашего пакета.

Реакция сама по себе, по-видимому, благоприятствует peerDependencies. Вам явно не нужны две отдельные версии react в вашем пакете Javascript (что происходит по умолчанию, если вы используете dependencies), но это легко исправить с помощью npm dedupe.

Таким образом, нет правильного пути для этого, работают как peerDependencies, так и dependencies. Использование dependencies в большей степени соответствует пути node/NPM, но использование peerDependencies более дружелюбное к пользователям вашего пакета, который не знает о npm dedupe и почему он нужен.