2026年7月9日

WordPressのnpm workspacesを使ったモノレポ開発

カスタマイズ

はじめに

この記事では、開発者やプロジェクトマネージャーが複数の関連するnpmパッケージを一元管理するためにnpm workspacesという手法を活用し、WordPressプラグインとテーマのモノレポ（Monorepo）開発について解説します。このアプローチは、依存関係の明確化やコードのリファクタリング、新しい開発者のオンボーディングなどを容易にします。

症状・背景

プラグインやテーマが大量になり管理が複雑になる
複数のプロジェクト間で共通ライブラリが必要となる
コードの再利用性を高めたい
前方互換性のある開発環境を整えたい

手順・設定方法

ステップ1: npmワークスペースのセットアップ

# ディレクトリを作成する
mkdir wp-monorepo && cd $_

# package.jsonを作成し、プロジェクト全体を管理するnpmスコープを定義する
npx degit scaffold/package monorepo
cd monorepo
cat > package.json <<EOF
{
  "name": "@myorg/monorepo",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "scripts": {
    "prepare": "npm-run-all --parallel bootstrap:* build:* lint:* test:*"
  }
}
EOF

# ワークスペースディレクトリを作成
mkdir -p packages/core packages/plugins/packages/themes

ステップ2: プラグインとテーマの作成

# coreパッケージを作成する
cd packages/core && npm init --yes
echo '{ "version": "1.0.0" }' > package.json
cat >> package.json <<EOF
{
  "scripts": {
    "build": "tsc",
    "lint": "eslint ."
  }
}
EOF

# pluginsワークスペースを初期化する
cd ../plugins && npm init --yes
echo '{ "version": "1.0.0" }' > package.json
cat >> package.json <<EOF
{
  "scripts": {
    "build": "tsc",
    "lint": "eslint ."
  }
}
EOF

# themesワークスペースを初期化する
cd ../themes && npm init --yes
echo '{ "version": "1.0.0" }' > package.json
cat >> package.json <<EOF
{
  "scripts": {
    "build": "tsc",
    "lint": "eslint ."
  }
}
EOF

# ワークスペースの親ディレクトリに戻る
cd ..

ステップ3: WordPressプラグインとテーマへの依存関係追加

# coreパッケージにWordPressの依存関係を追加する
cd packages/core && npm install --save-dev @wordpress/scripts eslint-plugin-wp webpack

# pluginsワークスペースにcoreパッケージと他の依存関係を追加する
cd ../plugins && npm install --save @myorg/monorepo/packages/core
npm install --save-dev babel-eslint eslint

# themesワークスペースにcoreパッケージと他の依存関係を追加する
cd ../themes && npm install --save @myorg/monorepo/packages/core
npm install --save-dev babel-eslint eslint

ステップ4: プロジェクトのビルド、テスト、デプロイ

# 一括でプロジェクトをビルドする
cd .. && npm run build

# 依存関係が適切に解決されていることを確認する
npm ls @myorg/monorepo/packages/core

# テストスクリプトを実行し、問題がないことを確認する
npm test

注意事項

サポートしているNode.jsのバージョンをチェックしてください。
依存関係が適切に解決されているか確認すること。
各パッケージで必要なツールやライブラリを追加インストールする必要があるかもしれません。
プロジェクトのセキュリティとパフォーマンスのために定期的なレビューと更新を行うこと。

まとめ

1. npmワークスペースの設定: npm workspacesを使用して一元管理を行い、依存関係を明確化します。

2. プラグイン/テーマの作成: ワークスペースディレクトリを作り、必要なファイルと初期設定を行います。

3. 依存関係の追加: それぞれのパッケージに必要なライブラリや他のパッケージを追加します。

4. ビルド/テスト/デプロイ: プロジェクト全体を一括でビルドし、テストスクリプトを実行して問題がないことを確認します。

Post Views: 4