如何管理通过 npm 共享的 React 组件中的导入和依赖项

Question

我是分享 React 组件的新手，我想知道我想做的事情是否可行。

所以我有一个按钮组件可以更改应用程序的语言。我有一个包含多个 React 应用程序的应用程序，我想分享一些组件，例如这个按钮。

import React from 'react';
import { useTranslation } from 'react-i18next';

const LngSwitch: React.FC = () => {
  const { i18n } = useTranslation();

  [...some other functions]

  return <div>[...component body]</div>;
};

export default LngSwitch;

问题是我在这里使用这个翻译挂钩。我希望共享组件使用安装它的应用程序中的 i18next 包，否则它就没用了。

我的意思是，如果我在我的库目录中安装并捆绑“i18next”，并且这个捆绑包将被发布，在应用程序中导入这个组件时，它将有自己的 i18n 配置，这不是重点。

所以我希望我的组件使用应用程序中安装的包。我希望有办法实现这一目标。如果没有，也许您知道如何共享此组件以使其正常工作。

谢谢

Answer 1

您可能要找的是 peer dependency。您可以将 react-i18next 添加到您的 devDependencies 和 peerDependencies，您的 devDependencies 版本将用于开发，而 peerDependencies 版本将从用作包时的顶级 package.json。

也就是说，这可能不是这种情况下的最佳选择；对等依赖通常与插件等紧密耦合的包一起使用，除了指定版本之外，您无法控制包的功能。对等依赖项是否在这里起作用取决于 react-i18next 实现。

如何管理通过 npm 共享的 React 组件中的导入和依赖项

How to manage imports, dependencies in react component shared via npm

javascript

dependencies

shared-libraries

npm

reactjs