在 Javascript 中，如何在 require() 中动态构造路径？ [复制]答案

【问题标题】：In Javascript, how can I dynamically construct a path within a require()? [duplicate]在 Javascript 中，如何在 require() 中动态构造路径？ [复制]
【发布时间】：2021-12-12 18:20:26
【问题描述】：

我有一个环境文件。

正如标题所说，我想根据配置设置为我的图像构建路径，如下所示：

const images = {
      logo: require(`./${Config.BRAND}/images/logo_${Config.BRAND}.png`)
    };

不幸的是，它不起作用。

还有其他方法可以实现吗？

【问题讨论】：

您是否忘记了扩展名？ (.png, .jpg, ...)
如果你使用dotenv，你可以做到这一点。
动态导入是一种反模式github.com/import-js/eslint-plugin-import/blob/v2.22.1/docs/…
@enzo 在 react-native 中每个图像都是一个模块（或多或少）。这是官方加载本地图片的方式：reactnative.dev/docs/image.
@Erenn 这将如何解决问题？我不明白这与 JShales 问题有什么关系。

标签： javascript reactjs react-native

【解决方案1】：

您应该避免使用动态要求，因为它会产生不良后果。

Metro 捆绑器不会打包未使用的图像，动态要求使其难以检测。
官方文档中有介绍：React Native - Static Image Resources
ESLint 通常也不建议这样做：eslint-plugin-import/no-dynamic-require

您可以使用 if-else（或简单的三元）或 switch 语句来获取您要使用的图像。

const images = {
  logo: Config.BRAND === 'brand1' ? require(`./brand1/images/logo_brand1.png`) : require(`./brand2/images/logo_brand2.png`);
};

【讨论】：

确实，这个方法效果很好，但是动态 require 会大大减少代码量。
我认为这不适用于这里。静态代码分析通常不对图像进行。我想说你可以在那个位置忽略/禁用这个 eslint 规则。
最有可能的图像不会被复制到捆绑包，因为 Metro 捆绑器会认为这些图像由于动态需求而未被使用。
@MauriceNino 实际上，metro bundler 不会将未使用的图像复制到发布版本，并且动态要求使其难以检测。
可以肯定地说，你是对的@UgurEren :) stackoverflow.com/questions/30854232/… 但是你应该扩展你的答案，包括它不起作用的原因。

【解决方案2】：

在项目的根目录中创建一个 .env 文件。将动态品牌放在那里。

BRAND=Your_dynamic_link

安装而不是导入 dotenv 模块

require('dotenv').config()

你可以访问那个环境

const images = {
  logo: require(`./${process.env.BRAND}/images/logo_${process.env.BRAND}.png`)
};

【讨论】：

这实际上正是我正在做的，但要求不接受。
你能访问环境变量吗？很奇怪。