如何在EJS文件[WEBPACK]

2024-05-20 • 问答

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

我的JSON和EJS正常工作。

我在EJS中尝试类似的事情：

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

但是我在渲染器上获得的唯一输出（在HTML文件中）是：

"components/products.json"

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

目标是在JSON中显示图像的 URL ，以要求将其作为图像的 src EJS文件。

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

一切都在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 %>

如何在EJS文件[WEBPACK]