如何在没有商店的情况下在 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

如何在没有商店的情况下在 npm 上打包 React 组件

How to package a react component on npm without store

reactjs

npm-publish

mobx

react-hooks