从 JSON 文件中的 src 动态创建导入语句以进行 webpack 构建

Question

我有一个示例 JSON 文件，如下所示：

menu.json

{
  "0":{
      "img":"./101 cup noodles.png"
  },
  "1":{
      "img":"./102 cup noodles with beef.png"
  },
  "2":{
      "img":"./103 cup noodles with egg.png"
  },
  "3":{
      "img":"./104 cup noodles with shrimp.png"
  }
}

有没有办法为 JSON 文件中的每个图像链接动态创建导入语句以供 webpack 构建？

我希望避免在我的 javascript 文件顶部为每个图像编写单独的导入，尤其是在有数百个项目的情况下。例如：

menu.js

import img0 from './101 cup noodles.png'
import img1 from './102 cup noodles with beef.png'
import img2 from './103 cup noodles with egg.png'
import img3 from './104 cup noodles with shrimp.png'

我尝试过使用命名字段和 for 循环动态创建导入语句，但了解到导入语句需要是顶级的，所以不幸的是，以下方法不起作用：

menu.js

import data from './menu.json'

for (let i = 0; i < Object.keys(data).length; i++) {
    import ['img' + Object.keys(data)[i]] from data[i]['img'];
}

目前我正在使用上面的循环来控制台记录我的所有导入语句，并将它们复制并粘贴到我的代码顶部，但这似乎非常不雅，我想知道是否有更好的方法。

Answer 1

可以通过Object.keys获取对象的属性，然后通过数组映射构造字符串。

const obj = {
  "0":{
      "img":"./101 cup noodles.png"
  },
  "1":{
      "img":"./102 cup noodles with beef.png"
  },
  "2":{
      "img":"./103 cup noodles with egg.png"
  },
  "3":{
      "img":"./104 cup noodles with shrimp.png"
  }
}

const res = Object.keys(obj).map(e => `import ${Object.keys(obj[e])[0] + e} from '${obj[e].img}'`).join('\n')

console.log(res)