簡體   English   中英

從 JSON 文件中的 src 動態創建導入語句,用於 webpack 構建

[英]Dynamically create import statements from src's inside a JSON file for webpack build

我有一個示例 JSON 文件,如下所示:

菜單.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 文件頂部為每個圖像編寫單獨的導入,尤其是在有數百個項目的情況下。 例如:

菜單.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 循環動態地制作導入語句,但了解到導入語句需要是頂級的,所以不幸的是,以下方法不起作用:

菜單.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'];
}

目前我正在使用上面的循環來控制台記錄我所有的導入語句,並將它們復制粘貼到我的代碼頂部,但這似乎非常不雅,我想知道是否有更好的方法。

在這篇文章中,您有一系列可能對您有所幫助的策略。 我會考慮將所有圖像放在同一個文件夾中並一勞永逸地編寫路徑。

可以通過 Object.keys 獲取Object.keys的屬性,然后通過數組獲取 map 並構造字符串。

 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)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM