README

Tunderblight 是一个 Craft CMS 插件，使得使用 Vite ⚡️ 清单文件变得简单。

扩展 twig 以解码 Vite 在构建过程中生成的 manifest.json 格式。

要求

此模块需要 Craft CMS 3.0.0-RC1 或更高版本。

安装

使用 composer 在您的 Craft 项目中安装此插件

composer require hungrysandwichclub/thunderblight

使用

在 Craft 中安装并激活插件后（设置 → 插件），您可以在 twig 文件中将 Thunderblight 作为过滤器使用

{% set manifest = 'path/to/manifest.json' %}
{% set vite = manifest | thunderblight %}

这将查找由 Vite 创建的清单文件，您必须在 Vite 配置中指定此路径，通过设置 build.output 路径。您还需要通过将其设置为 true 启用 build.manifest 选项。有关更多信息，请参阅Vite 配置文档。

使用此对象，您可以这样输出静态文件和资源

{% for css in vite.css %}
    <link rel="stylesheet" href="{{ siteUrl }}/dist/{{ css }}">
{% endfor %}

{% for js in vite.js %}
    <script src="{{ siteUrl }}/dist/{{ js }}"></script>
{% endfor %}

这将支持文件分块。

我们建议使用 Craft 的环境变量（在您的 .env 文件中找到）进行适当的检查以提供正确的文件。更多关于配置项目的信息，请参阅Craft 文档。

{% set env = getenv('ENVIRONMENT') %}

Vite 配置

使用此设置，在您的 vite 源文件夹中运行 npm run build 后，项目将使用构建文件工作。但是，关于本地开发，您可能会问。

如果您在本地运行 Craft 安装，我们建议在当前项目之外的不同端口上运行 Vite 开发服务器，然后我们可以将开发服务器视为我们的文件的外部主机并像从 CDN 一样检索它们。有关设置此信息，请参阅 Vite 的后端集成指南。

应用上述教程，我们可以这样包含文件

<link rel="stylesheet" href="https://:3000/scss/_entry.scss" />
<script type="module" src="https://:3000/@vite/client"></script>
<script type="module" src="https://:3000/js/_entry.js"></script>

我们在本存储库的 example 文件夹中包含了一个示例 vite.config.js 文件，以帮助您快速启动。

完成所有这些步骤后，我们得到以下代码

{% set env = getenv('ENVIRONMENT') %}

{% if env == 'dev' %}

    <link rel="stylesheet" href="https://:3000/scss/_entry.scss" />
    <script type="module" src="https://:3000/@vite/client"></script>
    <script type="module" src="https://:3000/js/_entry.js"></script>

{% else %}

    {% set manifest = '{{ siteurl }}/dist/manifest.json' %}
    {% set vite = manifest | vitedebundle %}

    {% for css in vite.css %}
        <link rel="stylesheet" href="{{ siteUrl }}/dist/{{ css }}">
    {% endfor %}

    {% for js in vite.js %}
        <script src="{{ siteUrl }}/dist/{{ js }}"></script>
    {% endfor %}

{% endif %}

我们将其留给了您来解释，如果您更喜欢使用不同的策略来加载资源，我们很乐意听听您对此如何改进的看法！

Thunderblight 路线图

一些要完成的事情和潜在功能的想法

• 插件设置面板 - 设置构建路径和服务器主机 IP/端口
• 处理 Manifest 中的多个 Vite 页面
• 静态资源处理

有用链接和致谢

• https://github.com/andrefelipe/vite-php-setup
• https://github.com/clubstudioltd/craft-asset-rev
• https://plugins.craftcms.com/twigpack