Как упаковать реагирующий компонент на npm без магазина

Question

Я читал статьи о том, как публиковать sh реакцию компонентов на NPM, но я запутался в деталях, когда у компонента есть хранилище, реализованное с использованием библиотеки, такой как mobx. Возьмите простой пример, такой как компонент, который вы можете увидеть в полном объеме здесь :

const App = () => {
  const store = useLocalStore(() => ({
    data: initialData,
    index: 0,
    addRow() {
      if (this.index < this.data.length) {
        this.data = [...this.data, addData[this.index++]];
      }
    }
  }));

  return useObserver(() => (
    <div className="App">
      <MaterialTable
        columns={columns}
        data={store.data}
        title="Sample Material Table"
      />

      <Button onClick={store.addRow}>Add Row</Button>
    </div>
  ));
};

В этом примере используется MobX, где useObserver и useLocalStore указывают c для этого библиотека. Я лично выбираю использовать MobX. Допустим, я опубликовал sh на NPM и использовал его в другом проекте, который предпочитает использовать какую-то другую библиотеку управления состоянием. Я думаю, что то, что у меня здесь есть, сбивает с толку в этом сценарии, и, кроме того, я не уверен, что это вообще сработает - или, может быть, это будет ... Я не знаю.

Вопрос прост : как мне собрать этот компонент таким образом, чтобы он работал с любой библиотекой управления состоянием?

Answer 1

Допустим, вы хотите использовать mobx и значение по умолчанию react hooks в качестве двух различных типов управления состоянием для вашего компонента.

Решение 1:

Сначала сделайте mobx a зависимость от вашей библиотеки, затем структурируйте ваш пакет так, чтобы конечный пользователь мог использовать (импортировать) вашу библиотеку следующим образом:

//for regular (default) usage with hooks
import myComponent from 'package-name/hooks'

// for mobx version
import myComponent from 'package-name/mobx'

В любом случае вам необходимо разделить использование разных библиотек состояний и внутренне попытайтесь повторно использовать (совместно использовать) как можно больше кода при создании вашей библиотеки.

Решение 2:

Publi sh два (или, может быть, даже три) разных пакета под одним и тем же npm scope например, @myLib/mobx и @myLib/hooks и, возможно, третий пакет с кодом, который используется всеми пакетами @myLib/default