有没有办法根据条件 "dynamically" 将 json 文件加载到我的组件中？

Question

假设我有几个这样的翻译文件：

import English from "./lang/compiled-en.json";
import Spanish from "./lang/compiled-es.json";

等等我们计划支持的所有语言。这些被直接导入到它们使用的组件中，我们的应用程序作为一个整体被 webpack 分成块，其中可能包含许多组件，因此，许多字符串。
根据用户的区域设置只导入我需要的 languages.json 文件是理想的，而不是在必须检查区域设置并只使用一个文件时导入所有文件。
我在这里尝试了一个非常天真的尝试，但它确实有效：
另一个目录中存在的辅助函数：

export async function loadLocaleData(locale: string, path: string ) {
  switch (locale) {
    case "en-US":
      return await import(path + "/lang/en-compiled.json");
    case "pt-BR":
      return await import(path + "/lang/pt-br-compiled.json");
    default:
      return await import(path + "/lang/en-compiled/en.json");
  }
}

我在想将这个辅助函数导入到我需要翻译的组件中会在它们自己的目录中查找翻译文件。但是即使我对该路径进行硬编码以准确指定翻译文件的位置，我仍然会遇到错误。
上面的内容可以像这样实现到一个组件中：

  const localeContext = useContext(LocaleContext);

  const messages = loadLocaleData(
    localeContext.locale,
    "packages/components/Preferences/Billing"
  );

然后我最好将该消息传递到包装此单独组件的 IntlProvider 中。

这肯定是行不通的。有没有办法让它工作？我知道我想做什么，我只是不确定它有多大可能。

Answer 1

您可以像您尝试的那样使用动态导入，但您需要使用绝对路径。否则你的打包器 (Webpack) 实际上不知道在哪里可以找到它们。

或者，将您的语言文件存储在 public/ 目录中并使用 public 路径。 Webpack 不会触及这些文件 （除了 index.html），这可能是您最好的选择。

有没有办法根据条件 "dynamically" 将 json 文件加载到我的组件中？

Is there a way to "dynamically" load json files into my component based on a condition?

typescript

reactjs

webpack

code-splitting