如何让 Vite.js 在 Wordpress/Wordplate 中运行

Question

我有我目前正在使用的 Wordplate/Wordpress 网站。 Wordplate/Wordpress 自带 Vite。

现在我的问题是，我正试图让 Vite 在 Wordpress 中工作，就像 HMR 一样。

我真正想要的是，每次我更新我的index.scss时，网站都会得到这些更新。

现在，我已经将默认的vite.config.js覆盖为这个

import { defineConfig } from "vite";

require("dotenv").config();

export default defineConfig(() => ({
  publicDir: "resources/static",
  build: {
    assetsDir: "",
    emptyOutDir: true,
    manifest: true,
    outDir: `public/themes/${process.env.WP_DEFAULT_THEME}/assets`,
    rollupOptions: {
      input: `public/themes/${process.env.WP_DEFAULT_THEME}/resources/js/index.js`,
    },
  },
  plugins: [
    {
      name: "php",
      handleHotUpdate({ file, server }) {
        if (file.endsWith(".php")) {
          server.ws.send({ type: "full-reload", path: "*" });
        }
      },
    },
  ],
}));

我的index.js

import "../css/index.css";

index.css是我的index.scss的输出，我在其中编写 css 代码，然后将其输出到index.css 。 index.css就是我的子主题用来申请 styles 的文件。

这是我的子团队的functions.php加载我的 js 和我的 css

<?php
function my_theme_enqueue_styles()
{
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}

add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

// Register scripts and styles.
add_action('wp_enqueue_scripts', function () {
    $manifestPath = get_theme_file_path('assets/manifest.json');

    if (
        wp_get_environment_type() === 'local'
        && is_array(wp_remote_get('http://localhost:5173/')) // is Vite.js running
    ) {
        wp_enqueue_script('vite', 'http://localhost:5173/@vite/client', [], null);
        wp_enqueue_script('vite', 'http://localhost:5173/resources/js/index.js', [], null);
    } elseif (file_exists($manifestPath)) {
        $manifest = json_decode(file_get_contents($manifestPath), true);
        wp_enqueue_script(
            'vite',
            get_theme_file_uri('assets/' . $manifest['resources/js/index.js']['file']),
            [],
            null
        );
        wp_enqueue_style(
            'vite',
            get_theme_file_uri('assets/' . $manifest['resources/css/index.css']['file']),
            [],
            null
        );
    }
});

// Load scripts as modules.
add_filter('script_loader_tag', function (string $tag, string $handle, string $src) {
    if (in_array($handle, ['vite', 'vite'])) {
        return '<script type="module" src="' . esc_url($src) . '" defer></script>';
    }

    return $tag;
}, 10, 3);

实际上，每次我在index.scss中进行一些更改然后手动刷新浏览器时，我都可以看到更改。

但我不想手动完成，我希望它是自动的。

请如果有人这样做，我需要你的帮助。 谢谢。

Answer 1

我想到了。

我只是使用默认的vit.config.js

在我的 js 中， wordplate/resources/js/index.js我从我的子主题中导入了 css

import '../../public/themes/Divi-child/style.css';

然后我将我的index.scss编译成我的style.css子主题。

就是这样。

所以我的vite.config.js看起来像这样

import { defineConfig } from "vite";

require("dotenv").config();

export default defineConfig(() => ({
  publicDir: "resources",
  build: {
    assetsDir: "",
    emptyOutDir: true,
    manifest: true,
    outDir: `public/themes/${process.env.WP_DEFAULT_THEME}/assets`,
    rollupOptions: {
      input: `resources/js/index.js`,
    },
  },
  plugins: [
    {
      name: "php",
      handleHotUpdate({ file, server }) {
        if (file.endsWith(".php")) {
          server.ws.send({ type: "full-reload", path: "*" });
        }
      },
    },
  ],
}));