时间戳

首页 > 解决方案 > 如何在 EJS 文件中获取 JSON 内容 [WEBPACK]

webpack - 如何在 EJS 文件中获取 JSON 内容 [WEBPACK]

问题描述

我想从外部JSON文件中获取值，并在我的 EJS 文件中使用这些值，该文件由 webpack 编译为 HTML。

我的 JSON & EJS 工作正常。

我在我的 EJS 中尝试这样的事情：

<%=
require('./components/products.json')
%>

但我在渲染时得到的唯一输出（在 HTML 文件中）是：

"components/products.json"

我尝试使用 Fetch，但在捆绑时 Webpack 无法识别它。并且还尝试将其传递给变量但结果相同。

目标是显示JSON 中包含的图像URL ，以要求它们作为 EJS 文件中的图像源。

标签： webpackejswebpack-file-loader

解决方案

最后，我找到了一个合适的解决方案。对于将来会来这里的人：

一切都发生在webpack.config.js

配置 ：

1）我第一次需要我的 JSON 文件：

const productsJson = require('.src/components/products.json')

2）然后我在我的插件数组中添加以下代码：

new HtmlWebpackPlugin({
    template: './src/index.ejs',
    templateParameters: {
        'myJSON': productsJSON
    }
})

3）最后，在index.ejs不需要的文件中，它已经由webpack.config.js. 要显示 JSON 内容，您只需执行以下行：

<%= myJson.anything_In_My_Json %>

推荐阅读