###### tags: `wordpress`,`php`, `tailwind`, `vite`,`打包`,`熱更新`
# 🔍wordpress 整合 vite tailwind 熱更新 詳細解說 👊
---
## 建立資料夾：
### 建立 assets

💬說明：在根目錄建立 assets 資料夾

## 安裝 tailwind：
### 終端機指令 ； /assets/ ; package.json

<!-- 步驟1 終端機指令1 -->
步驟1 終端機指令1
npm install -D tailwindcss
<!-- 步驟1 終端機指令1 -->

<!-- 步驟2 終端機指令2 -->
npx tailwindcss init
<!-- 步驟2 終端機指令2 -->

<!-- 步驟3 建立檔案 -->
在assets資料夾建立 tailwind.css 並加入以下程式碼

/*!
Theme Name: WordPress + Tailwind
*/

@tailwind base;
@tailwind components;
@tailwind utilities;
<!-- 步驟3 建立檔案 -->

<!-- 步驟4 終端機指令3 -->
npx tailwindcss -i ./assets/tailwind.css -o ./assets/global.css --watch
<!-- 步驟4 終端機指令3 -->

<!-- 步驟5 編輯檔案 -->
編輯 package.json 檔案，在 "scripts" 裡加入 npm 快捷鍵程式碼

tailwindcss -i ./assets/tailwind.css -o ./assets/global.css --watch
<!-- 步驟5 編輯檔案 -->

💬說明：
步驟1：安裝 tailwind
步驟2：tailwind 初始化，生成 tailwind.config.js
步驟3：在assets資料夾建立 tailwind.cssv
步驟4：指定 tailwind 檔案輸入與輸出建立的位置
步驟5：編輯 package.json 檔案，可以輸入 npm run css 執行

## 安裝 vite：
### 終端機 ;

<!-- 步驟1 終端機指令1 -->
npm install -D vite
npm install -D scss//vite 認識scss語法
npm install -D vite-plugin-live-reload//vite即時預覽外掛程式
<!-- 步驟1 終端機指令1 -->

<!-- 步驟2 檢查檔案 -->
檢查 package.json 的 scripts，是否有
    "dev": "vite",
    "build": "vite build",
<!-- 步驟2 檢查檔案 -->
        
<!-- 步驟3 檢查檔案 -->
檢查根目錄是否有創建 vite.config.js
如果沒有自行創建 程式碼內容如下

import { defineConfig } from "vite"; //vite 主要套件
import liveReload from "vite-plugin-live-reload"; //vite 熱更新套件
import { resolve } from "path";

export default defineConfig({
  plugins: [
    liveReload(__dirname + "/**/*.php"), // 添加vite插件(即時更新檔案名稱)
    liveReload(__dirname + "/**/*.js"),
  ],
  root: "",
  base: process.env.NODE_ENV === "development" ? "/" : "/dist/",

  // 配置build打包
  build: {
    outDir: resolve(__dirname, "./dist"),
    emptyOutDir: true,
    manifest: true,
    target: "es2018",
    rollupOptions: {
      input: {
        global: resolve(__dirname, "./assets/global.css"), // 新增 global.css 入口
        script: resolve(__dirname, "./assets/js/script.js"), // 新增 script.js 入口
      },
      output: {
        entryFileNames: "[name].js",
        chunkFileNames: "[name].js",
        assetFileNames: "[name].[ext]",
      },
    },
    minify: true,
    write: true,
  },
  // server: {
  //   cors: true,
  //   strictPort: true,
  //   port: 5174,
  //   https: false,
  //   hmr: {
  //     host: "localhost",
  //   },
  // },
});

<!-- 步驟3 檢查檔案 -->

💬說明：
步驟1：安裝 vite
步驟2：檢查檔案
步驟3：檢查檔案

## 建立即時預覽：
### 建立 vite.entry.js

import "./assets/global.css";
import "./assets/js/script.js";

💬說明：把想要即時預覽的檔案 import 進去

## vite 即時熱更新：
### functions.php ; wp-config.php

<!-- 步驟1：functions.php 加入程式碼 -->
<?php
/*
* vite 專用
*/
function vite_dev_script()
{
	if (
		!defined('VITE_ENV') ||
		!defined('VITE_DEV_SERVER') ||
		constant('VITE_ENV') !== 'development'
	) {
		return;
	}

	$entry_file = constant('VITE_DEV_SERVER') . 'vite.entry.js';

	echo '<script type="module" src="' . esc_attr($entry_file) . '"></script>';
}

add_action('wp_head', 'vite_dev_script');
?>
<!-- 步驟1：functions.php 加入程式碼 -->

<!-- 步驟2：頂層 wp-config.php 加入程式碼 -->
<?php
// 加入這個變數代表是開發環境
define('VITE_ENV', 'development');
define('VITE_DEV_SERVER', 'http://localhost:5173/');
?>
<!-- 步驟2：頂層 wp-config.php 加入程式碼 -->

💬說明：
步驟1：functions.php 加入程式碼
步驟2：wp-config.php 加入程式碼

## 啟動熱更新
### 依序執行終端機程式碼

npm run css//執行tailwind
npm run dev//執行vite

vite 出現的本地端網域應該是 http:\\localhost:5173\，如果不是就依照出現的網域開啟網頁，在用自己需編輯的網域覆蓋即可

本地端網址，例如：localhost:8888/test

💬說明：依序執行即可，如果不用 tailwind 省略安裝 tailwind 和執行 tailwind 的步驟即可