MODx开发front-end/templates的正确方法

The right way to develop front-end/templates for MODx

我正在努力将模板集成到 MODx 中,并坚持尝试找到部署和更新资产的正确方法。

我有一个 Webpack 设置,可以将我所有的模板文件编译成静态资产和 HTML 文件,我计划将这些文件手动拆分成块并作为模板添加到 MODx 中,但后来我意识到这些模板将是无法维护。对图像、CSS 或 JS 的每次更改都会导致内容哈希更改,因此文件名和 URL 也会更改。

一定有办法,因为现在几乎每个网站都需要预处理图像、编译CSS、使用动态 js 导入等等,如果没有像 Webpack 这样的打包器,这是不可能的。

那么,为 MODx 部署和更新资产的最佳实践是什么?

最后,我想到了以下解决方案 - 我使用 HTML Webpack 插件和自定义 EJS 模板来生成包含所有 JS 的文件。

<%
for (key in htmlWebpackPlugin.files.chunks) { %><%
  if (htmlWebpackPlugin.files.jsIntegrity) { %>
<script defer
  src="<%= htmlWebpackPlugin.files.chunks[key].entry %>"
  type="text/javascript"
  integrity="<%= htmlWebpackPlugin.files.jsIntegrity[htmlWebpackPlugin.files.js.indexOf(htmlWebpackPlugin.files.chunks[key].entry)] %>"
  crossorigin="<%= webpackConfig.output.crossOriginLoading %>"></script><%
  } else { %>
<script defer src="<%= htmlWebpackPlugin.files.chunks[key].entry %>" type="text/javascript"></script><%
  } %><%
} %>

在 ModX 中,此文件用作插入页脚卡盘中的块的静态源。这允许在重新编译时自动更新指向 js 资产的链接。 CSS 资产使用相同的策略。

遗憾的是,图像没有解决方法,因此如果您更改链接图像,则必须手动编辑您的 ModX 模板。