README

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

使用方法

假设我们有以下插件文件结构

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

JavaScript

添加 JS 依赖

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

创建 vite.config.js

import create_config from '@southcoastweb/vite-for-wp';

export default create_config( 'js/src/main.ts', 'js/dist' );

如果您有多个入口点需要构建，请将一个对象作为第一个参数传递

// vite.config.js
import create_config from '@southcoastweb/vite-for-wp';

export default create_config(
	{
		main: 'js/src/main.ts',
		extra: 'js/src/extra.ts',
	},
	'js/dist',
);

如果您需要添加插件、使用 https 等，请将一个配置对象作为第三个参数传递

// vite.config.js
import { readFileSync } from 'node:fs';
import { resolve } from 'node:path';
import create_config from '@southcoastweb/vite-for-wp';
import react from '@vitejs/plugin-react';

export default create_config( 'js/src/main.ts', 'js/dist', {
	plugins: [ 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 southcoastweb/vite-for-wp

如果您的插件/主题不使用 composer，您可以直接复制主文件并引入它。

注册脚本

<?php

use SouthCoastWeb\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 以构建生产资产。

注意事项

外部依赖

如果您的 JS 包依赖于一个或多个 WordPress 模块（例如 @wordpress/i18n），您可以使用 rollup-plugin-external-globals 帮助将其定义为外部依赖。

npm add -D rollup-plugin-external-globals

// vite.config.js
import { wp_globals } from '@southcoastweb/vite-for-wp/utils';
import create_config from '@southcoastweb/vite-for-wp';
import external_globals from 'rollup-plugin-external-globals';

export default create_config( 'js/src/main.ts', 'js/dist', {
	plugins: [
		external_globals( {
			...wp_globals(),
			'some-registered-script-handle': 'GlobalVar',
		} ),
	],
} );

请注意，当注册脚本时，您需要将它们添加到 dependencies 数组中（参见上面的示例）。

示例插件

React: https://github.com/kucrut/vite-for-wp-example-react
Svelte: https://github.com/kucrut/catatan

限制

目前，此包尚未提供构建编辑器块的热模块替换（HMR）支持。

许可证

GPL v2

南岸网 / vite-for-wp

维护者

详细信息