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

【问题标题】：How to manage imports, dependencies in react component shared via npm如何管理通过 npm 共享的 React 组件中的导入和依赖项
【发布时间】：2021-08-26 23:45:29
【问题描述】：

我是分享 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 配置，这不是重点。

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

谢谢

【问题讨论】：

您能否在共享组件中添加一个i18n 属性，在每个具有不同翻译集的项目/应用程序中使用该挂钩，然后将唯一数据传递给您的组件？
你也可以去上下文路由，将你的 i18n 对象存储在上下文中，然后使用上下文钩子获取它。如果您将上下文提供程序放在每个应用程序的反应树中，那也将起作用
是的，这是我正在考虑做的选择，如果不可能的话：

标签： javascript reactjs npm dependencies shared-libraries

【解决方案1】：

您可能正在寻找的是peer dependency。您可以将react-i18next 添加到您的devDependencies 和peerDependencies，并且您的devDependencies 版本将用于开发，而peerDependencies 版本将使用顶级package.json 的包作为一个包。

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

【讨论】：

感谢您的回答，我想这就是我要找的。不过我会考虑您的警告，谢谢！