如何管理通过npm共享的React组件的导入与依赖（如react-i18next）

这是最直接匹配你需求的实现方式：

• 在组件库的package.json中，把react、react-dom、i18next、react-i18next这类宿主应用必然会提前安装的依赖，放到peerDependencies字段下，不要放在dependencies字段；开发阶段你可以把这些包放到devDependencies中用于本地调试。
• 配置打包工具（Rollup、Vite、Webpack均可）把上述peer依赖标记为external，不打包到组件库的最终产物里，组件运行时会自动从宿主应用的依赖树中加载对应包。

package.json配置示例：

{
  "name": "your-component-lib",
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "react-dom": "^17.0.0 || ^18.0.0",
    "i18next": ">=21.0.0",
    "react-i18next": ">=11.0.0"
  },
  "devDependencies": {
    "react": "^18.2.0",
    "i18next": "^23.0.0",
    "react-i18next": "^13.0.0"
  }
}

Rollup 打包配置示例：

export default {
  // 其他基础配置
  external: ['react', 'react-dom', 'i18next', 'react-i18next']
}

该方案不需要改动现有组件代码，组件会直接复用宿主应用初始化好的i18n实例，符合预期。

如果担心宿主安装的i18next版本和组件开发版本差异太大出现兼容问题，可以改造组件做逻辑解耦：

• 组件内部不直接导入react-i18next，将i18n实例或者切换语言的方法作为props传入组件，完全由宿主侧提供能力。

改造后组件示例：

import React from 'react';

interface LngSwitchProps {
  // 可选传入i18n实例
  i18n?: any;
  // 可选传入自定义切换语言方法，完全解耦i18n依赖
  onLngChange?: (lng: string) => void;
  currentLng?: string;
}

const LngSwitch: React.FC<LngSwitchProps> = ({ i18n, onLngChange, currentLng }) => {
  const handleChange = (lng: string) => {
    if (onLngChange) {
      onLngChange(lng);
      return;
    }
    i18n?.changeLanguage(lng);
  };

  const activeLng = currentLng || i18n?.language;
  return <div>[...component body]</div>;
};

export default LngSwitch;

宿主侧使用示例：

import { useTranslation } from 'react-i18next';
import { LngSwitch } from 'your-component-lib';

const App = () => {
  const { i18n } = useTranslation();
  return <LngSwitch i18n={i18n} />;
};

该方案组件本身不依赖任何i18n相关包，兼容性更强，就算宿主不用react-i18next也能正常使用该组件。

• 如果你的项目是微前端架构，除了上述配置外，也可以将主应用初始化好的i18n实例挂载到全局window对象上，共享组件直接从全局读取实例，也能避免多实例冲突。
• 组件库发布时可以在README中明确标注依赖要求，提示宿主需要安装对应版本范围的i18next、react-i18next包。

内容的提问来源于stack exchange，提问作者ushka1