Vite for WordPress 开发指南

Vite for WordPress 开发指南

vite-for-wp Vite integration for WordPress plugins and themes development. 项目地址: https://gitcode.com/gh_mirrors/vi/vite-for-wp

1. 项目目录结构及介绍

Vite for WordPress 是一个用于简化WordPress插件和主题开发流程的Vite集成工具。典型的项目结构可能如下所示：

my-plugin/
├── js/
│   ├── src/                 # 源代码目录，存放JavaScript或TypeScript源文件
│       └── main.ts         # 主入口文件（示例）
├── package.json             # 包含依赖管理以及npm脚本定义
├── plugin.php               # WordPress插件的主要PHP文件
└── vite.config.js           # Vite的配置文件

• js: 存放前端JavaScript相关代码。
  • src: 具体的源码目录，可以按需存放.ts或.js等文件。
• package.json: 管理项目依赖和定义构建命令。
• plugin.php: 对于WordPress插件来说，这是其核心文件，用来注册插件信息。
• vite.config.js: Vite配置文件，定制编译过程。

2. 项目的启动文件介绍

在Vite for WordPress中，主要关注两个启动方面：前端JavaScript的开发模式与构建发布。

开发环境启动

开发时，通过定义在package.json中的dev脚本来启动Vite的开发服务器。通常形如：

"scripts": {
  "dev": "vite"
}

执行npm run dev或yarn dev命令即可开启实时开发服务器，支持热模块替换(HMR)，方便前端开发迭代。

构建发布

当需要将开发完成的代码打包部署时，使用同样在package.json中定义的build脚本：

"scripts": {
  "build": "vite build"
}

此命令执行会根据vite.config.js中的配置，将源代码编译、压缩到指定的输出目录(outDir)，准备用于生产环境。

3. 项目的配置文件介绍

vite.config.js 是Vite的核心配置文件，它允许你定制构建过程。一个基础的例子可能如下：

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

export default defineConfig({
  plugins: [
    // 使用Vite for WP插件
    kucrut.viteForWp({
      input: 'js/src/main.ts', // 入口文件路径
      outDir: 'js/dist',       // 输出目录
    }),
  ],
});

• plugins: 配置插件列表，其中@kucrut/vite-for-wp是专为此WordPress开发场景设计的插件。
  • input: 指定你的主要入口文件，默认为src/main.js，这里修改为TypeScript版本的入口。
  • outDir: 编译后的输出目录，确保WordPress能够正确地加载这些资源。

此外，还可以添加额外的Vite插件、配置HTTPS服务器等高级功能，根据实际需求调整vite.config.js。

记得，对于特定框架如React或Svelte，可能还需引入对应的Vite插件，并按照项目需求进行配置调整。

vite-for-wp Vite integration for WordPress plugins and themes development. 项目地址: https://gitcode.com/gh_mirrors/vi/vite-for-wp