README

Vite 集成，用于 WordPress 插件和主题开发。

使用方法

假设我们有一个这样的插件文件结构

my-plugin/
├ js/
| └ src/
|   └ main.ts
├ package.json
├ plugin.php
└ vite.config.js

JavaScript

添加 JS 依赖项

npm add -D vite @kucrut/vite-for-wp

创建 vite.config.js

import { v4wp } from '@kucrut/vite-for-wp';

export default {
	plugins: [
		v4wp( {
			input: 'js/src/main.ts', // Optional, defaults to 'src/main.js'.
			outDir: 'js/dist', // Optional, defaults to 'dist'.
		} ),
	],
};

对于多个入口点，将对象作为第一个参数传递

// vite.config.js
import { v4wp } from '@kucrut/vite-for-wp';

export default {
	plugins: [
		v4wp( {
			input: {
				main: 'js/src/main.ts',
				extra: 'js/src/extra.ts',
			},
			outDir: 'js/dist',
		} ),
	],
};

有关设置入口点的信息，请参阅 Rollup 文档： https://rollup.node.org.cn/configuration-options/#input

您可以自由地 自定义配置，例如添加插件、使用 https 等

// vite.config.js
import { readFileSync } from 'node:fs';
import { v4wp } from '@kucrut/vite-for-wp';
import react from '@vitejs/plugin-react';

export default {
	plugins: [ v4wp( { input: 'js/src/main.ts', outDir: 'js/dist' } ), react() ],
	server: {
		host: 'mydomain.com',
		https: {
			cert: readFileSync( 'path/to/cert.pem' ),
			key: readFileSync( 'path/to/key.pem' ),
		},
	},
};

最后，将 dev 和 build 脚本添加到您的 package.json

{
	"scripts": {
		"build": "vite build",
		"dev": "vite"
	}
}

PHP

添加 composer 依赖项

composer require kucrut/vite-for-wp

如果您的插件/主题不使用 composer，您可以自由地复制 主文件 并调用它。

注册脚本

<?php

use Kucrut\Vite;

add_action( 'wp_enqueue_scripts', function (): void {
	Vite\enqueue_asset(
		__DIR__ . '/js/dist',
		'js/src/main.ts',
		[
			'handle' => 'my-script-handle',
			'dependencies' => [ 'wp-components', 'some-registered-script-handle' ], // Optional script dependencies. Defaults to empty array.
			'css-dependencies' => [ 'wp-components', 'some-registered-style-handle' ], // Optional style dependencies. Defaults to empty array.
			'css-media' => 'all', // Optional.
			'css-only' => false, // Optional. Set to true to only load style assets in production mode.
			'in-footer' => true, // Optional. Defaults to false.
		]
	);
} );

请注意，每个入口点都需要单独注册，即如果您有多个入口点，则需要为每个入口点调用 Vite\enqueue_asset()。

要仅注册资产，请使用 Vite\register_asset()。它接受与 Vite\enqueue_asset() 相同的参数，并返回一个数组，其中包含您可以在以后使用 wp_enqueue_script() 和 wp_enqueue_style() 注册的脚本和样式句柄。请注意，仅在生产模式下注册样式资产，因为在开发模式下，它们将由 Vite 自动加载。

现在，您可以在开发插件/主题时运行 npm run dev，并运行 npm run build 来构建生产资产。

注意

外部依赖

如果您的包依赖于 WordPress 注册的一个或多个脚本（例如 jquery、react、@wordpress/i18n 等）并且您希望将它们从最终构建中排除，请将 wp_scripts() 添加到 Vite 插件列表中。但首先，安装所需的依赖项

npm add -D rollup-plugin-external-globals vite-plugin-external

例如，要外部化 react 和 react-dom 包

// vite.config.js
import { v4wp } from '@kucrut/vite-for-wp';
import { wp_scripts } from '@kucrut/vite-for-wp/plugins';
import react from '@vitejs/plugin-react';

export default {
	plugins: [
		v4wp( {
			input: 'js/src/main.jsx',
			outDir: 'js/dist',
		} ),
		wp_scripts(),
		react( {
			jsxRuntime: 'classic',
		} ),
	],
};

针对 React 的特别注意事项

• react 和 react-dom 包仍然需要作为您的包的开发依赖项安装，因为它们由 @vitejs/plugin-react 使用。
• react 和 react-dom 应在注册脚本时添加到 dependencies 数组中（参见上面的示例）。

示例插件

• React: https://github.com/kucrut/vite-for-wp-example-react
• Svelte: https://github.com/kucrut/vite-for-wp-example-svelte
• 纯 JavaScript: https://github.com/kucrut/vite-for-wp-example-vanilla-js
• Vue: https://github.com/kucrut/vite-for-wp-example-vue

限制

目前，此包不提供构建编辑器块的热重载支持。

许可

GPL v2