🎉

Viteとwp-envでWordPressテーマ開発環境を作る

2024/06/07に公開

WordPress

Vite

tech

WordPressでもViteが使いたい

WordPressの開発環境にいつも迷っていたので、Viteとwp-envを組み合わせたテーマ開発環境を作ってみました。

仕様

node 18以上
styles、scriptsをコンパイル
imageは圧縮しない

結論

ディレクトリ構成

root
  ├── dist
  ├── sql
  ├── src
  │   ├── assets
  │   │   ├── scripts
  │   │   │   ├── pages
  │   │   │   │   └── [pages]
  │   │   │   │        └── index.js
  │   │   │   └── common.js
  │   │   └── styles
  │   │       ├── pages
  │   │       │   └── [pages]
  │   │       │        ├── _module.scss
  │   │       │        └── style.scss     //　同階層の'_*.scss'をimport   
  │   │       ├── components
  │   │       ├── reset
  │   │       ├── base
  │   │       └── main.scss
  │   └── public
  │       ├── assets
  │       │   ├── images
  │       │   ├── scripts   // 圧縮したくないscripts
  │       │   └── styles    // 圧縮したくないstyles
  │       ├── index.php
  │       └── style.css
  ├── .wp-env.json
  ├── package.json
  ├── vite.config.js
  └── watch.js

コード全部

.wp-env.json

{
  "core": "https://ja.wordpress.org/wordpress-6.5.3-ja.zip",
  "phpVersion": "8.1",
  "plugins": [
    "https://downloads.wordpress.org/plugin/advanced-custom-fields.6.3.0.zip"
  ],
  "themes": [],
  "port": 8888,
  "env": {
    "tests": {
        "port": 8889
    }
  },
  "config": {
    "WP_DEBUG": true
  },
  "mappings": {
    "wp-content/themes/watt-mag/": "./dist",
    "sql": "./sql"
  }
}

vite.config.js

import { defineConfig } from 'vite';
import sassGlobImports from 'vite-plugin-sass-glob-import';
import { globSync } from 'glob';
import path from 'node:path';
import { fileURLToPath } from 'node:url';

const jsFiles = Object.fromEntries(
  globSync('src/**/*.js', { ignore: ['node_modules/**','**/modules/**','**/dist/**,']}).map(file => [
    path.relative(
      'src/assets/',
      file.slice(0, file.length - path.extname(file).length)
    ),
    fileURLToPath(new URL(file, import.meta.url))
  ])
);

const scssFiles = Object.fromEntries(
  globSync('src/**/*.scss', { ignore: ['src/**/_*.scss'] }).map(file => [
    path.relative(
      'src/assets/',
      file.slice(0, file.length - path.extname(file).length)
    ),
    fileURLToPath(new URL(file, import.meta.url))
  ])
);

const inputObject = { ...scssFiles, ...jsFiles };

export default defineConfig({
  root: './src',
  publicDir: './public',
  build: {
    outDir: '../dist',
    rollupOptions: {
      input: inputObject,
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      },
    },
  },
  plugins: [
    sassGlobImports(),
  ],
  server: {
    port: 3000,
    watch: {
		  usePolling: true,
          extraWatchFiles: ['./public/**'],
	  },
  }
});

package.json

{
  "name": "vite_wp-env",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "watch": "vite build --watch & node watch.js",
    "wp-start": "npx wp-env start",
    "wp-stop": "npx wp-env stop",
    "wp-export": "npx wp-env run cli wp db export sql/wpenv.sql",
    "wp-import": "npx wp-env run cli wp db import sql/wpenv.sql"
  },
  "dependencies": {
    "chokidar": "^3.6.0",
    "glob": "^10.3.12",
    "sass": "^1.75.0",
    "vite-plugin-sass-glob-import": "^3.0.2",
  },
  "devDependencies": {
    "@wordpress/env": "^9.10.0",
    "vite": "^5.2.8"
  }
}

使い方

node18以上

yarn
yarn wp-start        // wpサーバ開始
yarn wp-stop　　　　　 // wpサーバ停止
yarn watch           // フロント監視

localhost:8888が立ち上がります。
localhost:8888/wp-login.phpで管理画面。
admin / passwordでログインできます。

DBの共有

DBをエクスポートしてsql/に格納して、git pushし他の作業者に共有することができます。

yarn wp-export    //sqlをエクスポート

他の作業者は sql/wpenv.sqlをインポートすることで、DB環境を共有することができます。便利。

yarn wp-import    //sqlをインポート

解説

wp-envの設定

WordPressの開発環境構築にwp-envを使用します。

wp-envはWordPress公式が出しているツールで、Docker環境、npmが扱えれば簡単にWordPressをローカルで立ち上げることができます。

パッケージのインストール

下記コマンドでパッケージをインストールします。

npm i -D @wordpress/env

下記コマンドで開始。少し時間がかかります。

npm run wp-env start

localhost:8888にアクセスするとWordPressの画面にアクセスできます。

.wp-env.jsonの設定

ルートディレクトリに.wp-env.jsonというファイルを作成し、WordPressの設定を変更します。

.wp-env.json

{
  "core": "https://ja.wordpress.org/wordpress-6.5.3-ja.zip",
  "phpVersion": "8.1",
  "plugins": [
    "https://downloads.wordpress.org/plugin/advanced-custom-fields.6.3.0.zip"
  ],
  "themes": [],
  "port": 8888,
  "env": {
    "tests": {
        "port": 8889
    }
  },
  "config": {
    "WP_DEBUG": true
  },
  "mappings": {
    "wp-content/themes/vite-wp-env-dev/": "./dist",
    "sql": "./sql"
  }
}

core、phpVersion、plugins、port等は適宜設定。
mappingは後ほど設定するViteの出力フォルダdistを指定します。
また、Docker Cliのsqlと/sqlをマッピングしておきます。

Viteの設定

フロントのツールは好みなのですが、今回はViteを使用します。

wp-envと下記記事の内容を組み合わせただけになるので、重複する部分は割愛します。

phpファイルをpublicファイルで管理、監視する

publicでは圧縮しないファイルを管理するので、PHPファイルはpublicで管理します。

yarn watchでsrc/assetsの変更を監視して、distに出力しますが、publicのファイルが更新されても再ビルドが行われず、毎回ビルドする必要があるため、ドキュメントルートにwatch.jsを作成し、下記を設定します。

watch.js

const chokidar = require('chokidar');
const { exec } = require('child_process');

// `src/public`フォルダの変更を監視
const watcher = chokidar.watch('src/public', {
  ignored: /(^|[\/\\])\../, // ドットファイルは無視
  persistent: true,
});

// 変更があった場合にビルドを再実行
watcher.on('all', (event, path) => {
  console.log(`${event} detected in ${path}`);
  exec('vite build', (err, stdout, stderr) => {
    if (err) {
      console.error(`Error executing build: ${err}`);
      return;
    }
    if (stdout) console.log(stdout);
    if (stderr) console.error(stderr);
  });
});

package.jsonでyarn watchと一緒にwatch.jsを走らせるように設定します。