Back to list
dev_to 2026年4月20日

WPBones v2 — The Webpack Release

WPBones v2 — The Webpack Release

Translated: 2026/4/20 14:15:58
webpacktypescriptphp-boneswordpress-developermagento-framework

Japanese Translation

Gulp は終了しました。Yarn スクリプトが統合され、TypeScript がデフォルトで採用されました。14 のボイラープレートが更新されました。php bones migrate:to-v2 を使用して 1 つのプラグインを v2 に移行してください。数年来 Gulp、run-s、そしてプラグインごとに独自のビルドスクリプトというパッチワーク状態を運用してきた WPBones v2 は、これをすべて単一の Webpack ベースのパイプラインに統合します。WPBones で開発されたすべてのプラグインは、同じ yarn dev/build/test/format/lint コマンド、同じ webpack 設定、そして同じ TypeScript + Jest + Prettier のデフォルト設定を使用します。移行を痛みなく行うために、v2 は php bones migrate:to-v2 という 1 つのコマンドでの自動移行ツールを搭載しており、プラグインその場所にコードを書き換えます。これはフレームワーク史上最も壊滅的な変更であり、可能な限り移行パスを短くしました。WPBones プラグインの近代化を後回しにしてきたのであれば、今週末が理想的なタイミングです。古い v1.x のパイプラインは、run-s が統括した gulp タスクのスタックでした。1 つのスクリプトが SCSS をコンパイルし、もう 1 つが JS をバンドルし、3 つ目が TypeScript をトランスパイルし、4 つ目が React アプリをビルドし、5 つ目がファイルをコピーしました。どのボイラープレートも独自のバリエーションを持っており、各プラグインも独自の動きを見せていました。v2 は、これらすべてを単一の webpack.config.js に置き換え、resources/assets/: からエンティティを自動的に発見します。resources/assets/apps/.tsx ファイルを配置すると、public/apps/.js にビルドされます。resources/assets/apps//index.tsx フォルダを配置すると、同じ結果が得られます。resources/assets/css/ に CSS/SCSS/LESS を配置すると、public/css/.css にコンパイルされます。resources/assets/js/ に TS/JS を配置すると、public/js/.js にコンパイルされます。gulpfile.js を編集して新しいエンティティを登録する必要はもうありません。run-s の座標化も必要ありません。ファイルを保存し、webpack がいじょうにピックアップします。WPBones v2 で開発されたすべてのプラグイン—from 軽量な Base ボイラープレートからフル機能の Mantine UI デモまで— は、同じ 5 つのコマンドに反応します:yarn dev # watch モード (webpack + @wordpress/scripts)、yarn build # 本番ビルド、yarn test # Jest with @wordpress/jest-preset-default、yarn format # Prettier、yarn lint # ESLint (WP preset)。ツールチェーンを再学習することなくプラグイン間で移行できます。すべての v2 プラグインは、tsconfig.json(厳格モード)、jest.config.js、.prettierrc を搭載しており、これらはすべて @wordpress/* プレセットに接続されています。.ts/.tsx はどこでも使用でき、Jest テストをソースのそばに書き、yarn format を実行して一貫性を保てます。オプション入りません。別々の設定ステップもありません。単にコードを書いてください。php bones migrate:to-v2 — 自動移行ツール壊れる変更の話は難しいため、v2 はワンショットの移行コマンドを搭載しています:php bones migrate:to-v2 これは gulpfile.js と package-lock.json を削除し、フレームワークのステューブから webpack.config.js / tsconfig.json / .prettierrc / jest.config.js を作成し、package.json スクリプトを v2 セットに書き換え、gulp エポックの devDependencies を削除し、v2 セット (@wordpress/scripts ^31、typescript、glob、webpack-remove-empty-scripts) をインストールします。その後に yarn install && yarn build を実行すれば、あなたは v2 上のところにあります。私たちはこの移行ツールをすでに 14 のボイラープレートで使っています。それは機能します。php bones make:app with reserved-handle safety プラグイン内に新しい React/TypeScript アプリを生成するには、今やワンライナーです:php bones make:app my-dashboard このコマンドは、予約 WordPress コア ハンドル (dashboard, post, common, jquery, wp-element…) を持つアプリを生成することを拒否します。私たちは自分自身にこのことを噛まされました。当時は dashboard ハンドルが無言で WP コアによって削除されました。今では CLI がそれが謎のバグになる前にそれをキャッチします。WPBones ファミリーのすべてのボイラープレートには、移行と新しい CLAUDE.md が追加され、全体概要、スモックテスト手順、テンプレート使用法の説明、そしてフレームワーク表面を演習するリストが含まれています:Base — 最小限のスターター (JS/TS、SCSS/LESS/CSS、小さな React サンプル、Jest テスト)、TypeScript — 厳格な TS 展示 (インターフェース、ジェネリック、ユニオン、タイプガード、ユーティリティタイプ)、ReactJS — @wordpress/* ライブラリのみを使用した React、サードパーティアイ kits なし、Mantine UI — フル行政管理アプリ:テーマ付け、ダークモード、タブ、フォーム、モーダル、通知、DataTable API — クロージャとコントローラーと許可コールバックで REST API ルーティング、Routes — 行政管理メニュールーティングとカスタムページルーティングと名前付き URL ヘルパー、Blade — BladeOne テンプレティング

Original Content

Gulp is gone. Yarn scripts are unified. TypeScript is default. 14 boilerplates refreshed. One php bones migrate:to-v2 away. After years of shipping with Gulp, run-s, and a patchwork of per-plugin build scripts, WPBones v2 collapses all of it into a single webpack-based pipeline. Every plugin built with WPBones now uses the same yarn dev/build/test/format/lint commands, the same webpack config, the same TypeScript + Jest + Prettier defaults. And to make the jump painless, v2 ships with php bones migrate:to-v2 — a one-command automated migrator that rewrites your plugin in place. This is the biggest breaking change in the framework's history, and we made the migration path as short as we could. If you've been putting off modernizing your WPBones plugin, this weekend is a good weekend. The old v1.x pipeline was a stack of gulp tasks orchestrated by run-s: one script to compile SCSS, another to bundle JS, a third to transpile TypeScript, a fourth to build React apps, a fifth to copy things. Every boilerplate had its own variation, and every plugin drifted. v2 replaces all of it with a single webpack.config.js that auto-discovers entries from resources/assets/: Drop a file in resources/assets/apps/.tsx → builds to public/apps/.js Drop a folder at resources/assets/apps//index.tsx → same thing Drop CSS/SCSS/LESS in resources/assets/css/ → compiles to public/css/.css Drop TS/JS in resources/assets/js/ → compiles to public/js/.js No more editing gulpfile.js to register a new entry. No more run-s coordination. Just save the file and webpack picks it up. Every plugin built on WPBones v2 — from the leanest Base boilerplate to the full Mantine UI demo — now responds to the same five commands: yarn dev # watch mode (webpack + @wordpress/scripts) yarn build # production build yarn test # Jest with @wordpress/jest-preset-default yarn format # Prettier yarn lint # ESLint (WP preset) Move from one plugin to another without re-learning the toolchain. Every v2 plugin ships with tsconfig.json (strict mode), jest.config.js, and .prettierrc — all wired to the @wordpress/* presets. You can use .ts / .tsx anywhere, write Jest tests next to your source, and run yarn format to keep everything consistent. No opt-in, no separate setup step. Just write code. php bones migrate:to-v2 — the automated migrator The breaking change story is tricky, so v2 ships with a one-shot migration command: php bones migrate:to-v2 It removes gulpfile.js and package-lock.json, creates webpack.config.js / tsconfig.json / .prettierrc / jest.config.js from framework stubs, rewrites package.json scripts to the v2 set, drops gulp-era devDependencies and installs the v2 set (@wordpress/scripts ^31, typescript, glob, webpack-remove-empty-scripts). Run yarn install && yarn build afterward and you're on v2. We've used this migrator ourselves on 14 boilerplates. It works. php bones make:app with reserved-handle safety Generating a new React/TypeScript app inside a plugin is now a one-liner: php bones make:app my-dashboard The command also refuses to create apps with reserved WordPress core handles (dashboard, post, common, jquery, wp-element…). We got bitten by this ourselves when a dashboard handle silently got dropped by WP core — now the CLI catches it before it becomes a mystery bug. Every boilerplate in the WPBones family got the migration + a shiny new CLAUDE.md with an overview, smoke test steps, template-usage instructions, and a list of the framework surface it exercises: Base — the minimum starter (JS/TS, SCSS/LESS/CSS, a small React sample, a Jest test) TypeScript — strict TS showcase (interfaces, generics, unions, type guards, utility types) ReactJS — React with only @wordpress/* libraries, no third-party UI kit Mantine UI — full admin app: theming, dark mode, tabs, forms, modals, notifications, DataTable API — REST API routing with closures + controllers + permission callbacks Routes — admin menu routing + custom page routes + named URL helpers Blade — BladeOne templating (@foreach, {{ }}, partials) CPT — custom post types + custom taxonomies as service providers Cron — scheduled events via service provider Database — migrations, seeders, query builder, Eloquent ORM Hooks — plugin/hooks/*.php auto-inclusion convention Internationalization — POT/PO/MO/JSON pipeline with a working Italian translation Options — declarative config/options.php + live $plugin->options accessor Packages — demos of every official wpbones/* composer package Each is a GitHub template repo — click Use this template, run php bones rename, and you have a working plugin. v2.0.1 lands today alongside v2.0.0 with a patch for a regression we caught during Mantine boilerplate testing. The short version: withInlineScript() and withLocalizeScript() now correctly route to adminAppsAssets when the handle was registered via withAdminAppsScript() — before v2.0.1, the inline script was silently dropped by WordPress because the handle wasn't yet enqueued at the moment wp_add_inline_script() ran. Any plugin combining ->withAdminAppsScript('my-app')->withInlineScript('my-app', 'window.MyApp = {…}') would have had window.MyApp come through as undefined. If you hit that, v2.0.1 is the fix. If you didn't, you're still getting it for free. wpbones.com got a full refresh for v2: New Boilerplates section with a dedicated page per boilerplate Migrating to v2 guide walking through the automated migrator step by step WordPress environments comparison (wp-env, Valet, Local, DDEV, Lando, Playground, Docker, Vagrant) — pick the stack that fits your OS and workflow Stale Gulp references removed from core-plugin-files, getting-started, and official-packages Getting Started New to WPBones? Pick a boilerplate that matches what you want to build, then: gh repo create my-plugin --template wpbones/WPKirk-Boilerplate --public --clone cd my-plugin composer install php bones rename "My Plugin" yarn install && yarn build From your plugin root: # Pull in WPBones v2 composer require wpbones/wpbones:^2.0.1 # Run the automated migrator php bones migrate:to-v2 # Install the new dev deps and build yarn install && yarn build Review the Migrating to v2 guide for the full breakdown of what changes. 🌐 Website & Docs: wpbones.com 📦 Framework on Packagist: wpbones/wpbones 🐙 GitHub: wpbones/WPBones 💬 Discord: Join the community 📋 v2.0.1 Release Notes: github.com/wpbones/WPBones/releases/tag/v2.0.1 🔁 Migrating to v2: wpbones.com/docs/migrating-to-v2 🧭 Boilerplates Overview: wpbones.com/docs/boilerplates/overview About WPBones WPBones is a Laravel-style framework for WordPress plugin development. It gives you an IoC container, service providers, Blade templating, Eloquent ORM, a CLI code generator, and all the patterns you already know from Laravel — adapted to the WordPress lifecycle. If you like Composer, yarn, webpack, and TypeScript as much as you like WordPress, this is the framework for you.