有没有办法根据条件“动态”将 json 文件加载到我的组件中？

Question

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

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

对于我们计划支持的所有语言等等。这些直接导入到它们使用的组件中，我们的应用程序作为一个整体被 webpack 分割成块，其中可能包含许多组件，因此也包含许多字符串。
最好只根据用户的语言环境导入我需要的 language.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/ 目录中并使用它的公共路径。 Webpack 不会接触这些文件（除了index.html），这可能是你最好的选择。