如何在无存储的npm上打包react组件

Question

我一直在阅读有关如何将React组件发布到NPM的文章，但是当组件具有使用mobx之类的库实现的商店时，我对这些细节感到困惑。举一个简单的示例，例如您可以完整查看的组件here：

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特定于该库。我个人选择使用MobX。假设我将其发布到NPM，并在另一个倾向于使用其他状态管理库的项目中使用。我认为我在这里遇到的情况令人困惑，此外，我不确定它甚至根本无法工作，或者也许……我不知道。

问题很简单：如何以与任何状态管理库一起使用的方式将这个组件组合在一起？

Answer 1

假设您要使用mobx和默认react hooks作为组件的两种不同类型的状态管理。

解决方案1：

首先，将mobx设为库的对等依赖项，然后构造您的包最终用户可以这样使用（导入）您的库的方式：

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

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

无论如何，您需要分开使用不同的状态库，并在创建库时在内部尝试重用（共享）尽可能多的代码。

解决方案2：

在同一npm scope下发布两个（或什至三个）不同的程序包例如@myLib/mobx和@myLib/hooks以及可能包含代码的第三个程序包在所有软件包之间共享@myLib/default