README

为WP添加Vite集成。 vite-manifest.php 是 kucrut/vite-for-wp 的分支版本。

如何配置vite

在 package.json 脚本中，添加 --host 参数："dev": "vite --host" 并运行 npm install dotenv。

更新您的 vite.config 以包含 server 设置并启用清单

import {resolve} from 'path';
import {fileURLToPath, URL} from 'node:url'
import fs from "fs";

import {defineConfig, splitVendorChunkPlugin} from 'vite'
import vue from '@vitejs/plugin-vue'
import dotenv from 'dotenv';

dotenv.config(); // load env vars from .env

// https://github.com/idleberg/php-wordpress-vite-assets
const _server = {
  port: 3003,
  strictPort: true,
  cors: false,
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  hmr: {
    protocol: 'ws',
  },
};

const server = {
  ..._server,
};

if (process.env.VITE_SERVER_HOST) {
  server.host = process.env.VITE_SERVER_HOST;
  server.hmr.host = process.env.VITE_SERVER_HOST;
  server.origin = process.env.VITE_SERVER_HOST;
}

if (process.env.VITE_SERVER_PORT) {
  server.port = process.env.VITE_SERVER_PORT;
  server.hmr.port = process.env.VITE_SERVER_PORT;
}

if (process.env.VITE_HTTPS_KEY && process.env.VITE_HTTPS_CERT) {
  if (fs.existsSync(process.env.VITE_HTTPS_KEY) && fs.existsSync(process.env.VITE_HTTPS_CERT)) {
    server.https = {
      key: fs.readFileSync(process.env.VITE_HTTPS_KEY),
      cert: fs.readFileSync(process.env.VITE_HTTPS_CERT),
    };
    server.hmr = 'wss';
  }
}

// https://vite.ac.cn/config/
export default defineConfig({
  server,

  plugins: [vue(), splitVendorChunkPlugin()],
  build: {
    manifest: true,
    cssCodeSplit: true,
    sourcemap: true,
    assetsDir: '',
    rollupOptions: {
      // https://rollup.node.org.cn/configuration-options/
      input: {
        'your-script-name': resolve(__dirname, 'src/your-script-name.js'),
      },
    },
  },

  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

您的 .env 应包含匹配的 server 项目

VITE_SERVER_HOST=your-host.local-dev <<< the same host you're using on WP
VITE_SERVER_PORT=3003

VITE_HTTPS_CERT=/etc/ssl/certs/custom_certs/_cert.pem
VITE_HTTPS_KEY=/etc/ssl/certs/custom_certs/_cert-key.pem

如何在您的WP插件中使用

按照如下方式注册资源

$assetsContainer = new AssetsContainer();
$assets = new Assets(
  [
    'my-custom-script-name' => ['handle' => 'your-script-name-handle-registered-to-wp', 'src' => 'your-script-name-as-it-is-inside-manifest'],
    // ... register as many assets as you need
  ],
  plugins_url('assets/dist', __FILE__), // <<< the URL of where the build files are stored
  plugin_dir_path(__FILE__) . 'assets/dist', // <<< the PATH of the manifest' **directory**
  $assetsContainer
);

$assets->hooks();

请注意，您不需要担心 wp_enqueue_scripts 钩子；这必须尽可能早地运行！

排队资源

请注意，您不需要使用WP处理程序，而是使用在 Assets 类中注册资源时使用的处理程序！

$assetsContainer->enqueue('my-custom-script-name'); // this must be called _after_ `wp_enqueue_scripts` was triggered
$assetsContainer->frontendEnqueue('my-custom-script-name'); // this must be called at any time
$assetsContainer->adminEnqueue('my-custom-script-name'); // this must be called at any time

您还可以添加内联脚本（例如，用于JS配置）

$assetsContainer->enqueue('your-script-name', 'my_inline_js', [
  'foo' => 'bar'
]);

您甚至可以将可调用的作为第三个参数，这样您就有了一个延迟回调

$assetsContainer->enqueue('your-script-name', 'my_inline_js', fn() => [
  'foo' => 'bar'
]);

然后在您的JS代码中，您将使用

console.log(my_inline_js)

如果您愿意，您也可以将第二个参数作为元组，这样您就可以在多个实例上使用生成的组件（例如，在Elementor小部件上）

$assetsContainer->enqueue('your-script-name', ['the_global_object_var_name', 'the_id'], fn() => [
  'foo' => 'bar'
]);

它将内部生成类似以下代码

window.the_global_object_var_name = window.the_global_object_var_name || {}
window.the_global_object_var_name['the_id'] = { foo: 'bar' }

然后您可以像这样使用它

console.log( the_global_object_var_name['the_id'] )