README

为 Kirby 提供加载由 Vite 生成的资源的插件。

另一个类似的插件是 arnoson/kirby-vite，但它更复杂，依赖于手动生成 .lock 文件（可以通过仅依赖清单的存在而省略）。因此，它启发了这个插件的创建。

注意： 与 Vite 3.1.2 开发和测试。

工作原理

该插件依赖于 Vite 的清单功能，它生成一个包含非哈希文件名到其哈希版本映射的 manifest.json 文件。该插件使用此文件来渲染正确的资源链接。如果此文件不存在，则假定 Vite 正在开发模式下运行，插件尝试从 Vite 的开发服务器请求文件。

您可以在 Packagist 上找到 oblik/kirby-vite

composer require oblik/kirby-vite

下载并将此存储库复制到 /site/plugins/vite。

git submodule add https://github.com/oblik/kirby-vite.git site/plugins/vite

确保您已在您的 vite.config.js 中启用了 build.manifest 选项

// vite.config.js
export default defineConfig({
	build: {
		manifest: true,
	},
});

ℹ️ 您可能想深入了解 Vite 的后端集成指南，以了解 Vite 如何处理传统后端中的资源。

您需要将入口脚本传递给 js() 方法

<?= vite()->js('src/index.js') ?>

您需要像 JavaScript 一样做，但使用 css() 方法

<?= vite()->css('src/index.js') ?>

注意： 当使用 Vite 时，CSS 文件在主 JavaScript 文件中导入。为了从生成的清单中找到 CSS，插件需要导入您的 CSS 的文件，而不是 CSS 文件本身。

注意 2： 在开发模式下，css() 方法不执行任何操作，因为 Vite 在您的 JavaScript 加载时自动加载您的 CSS 以及所需的 @vite/client 脚本。换句话说，vite()->js() 加载一切。

如工作原理部分中所述，为了确保正常功能，每次您启动开发服务器时，都应该删除构建文件夹。这可以通过在您的 npm 开发脚本中使用 rm -rf 轻松完成。

{
	"scripts": {
		"dev": "rm -rf dist && vite"
	}
}

在您的 config.php 中，确保您已将插件配置为与您的 vite.config.js 相匹配

return [
	'oblik.vite' => [
		'server' => [
			'port' => 5173,
			'https' => false,
		],
		'build' => [
			'outDir' => 'dist'
		]
	]
];

注意： 上面的值是默认值，所以如果它们与您的设置匹配，您不需要进行任何配置。 🤙