Download the PHP package kucrut/vite-for-wp without Composer
On this page you can find all versions of the php package kucrut/vite-for-wp. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download kucrut/vite-for-wp
More information about kucrut/vite-for-wp
Files in kucrut/vite-for-wp
Package vite-for-wp
Short Description Vite integration for WordPress plugins and themes development.
License GPL-2.0-only
Informations about the package vite-for-wp
Vite for WordPress
Vite integration for WordPress plugins and themes development.
Usage
Let's assume we have this plugin files structure:
JavaScript
Add JS dependencies:
Create vite.config.js
:
For multiple entrypoints, pass an object as the first parameter:
Refer to Rollup documentation on how to set entrypoints: https://rollupjs.org/configuration-options/#input
Feel free to customise the configuration to add plugins, use https, etc:
Lastly, add dev
and build
scripts to your package.json
:
PHP
Add the composer dependency:
If your plugin/theme doesn't use composer, feel free to copy the main file and require it.
Enqueue the script:
Note that each entrypoint needs to be enqueued separately, ie. if you have multiple entrypoints, you'll need to call Vite\enqueue_asset()
for each and every one of them.
To only register the asset, use Vite\register_asset()
. It accepts same parameters as Vite\enqueue_asset()
and returns an array of scripts and styles handles that you can enqueue later using wp_enqueue_script()
and wp_enqueue_style()
. Please note that style assets are only registered in production mode because in development mode, they will be automatically loaded by Vite.
You can now run npm run dev
when developing your plugin/theme and run npm run build
to build the production assets.
Notes
External Dependencies
If your package depends on one or more scripts registered by WordPress (eg. jquery
, react
, @wordpress/i18n
, etc.) and you want to exclude them from the final build, add wp_scripts()
to the list of Vite's plugins. But first, install the required dependencies:
For example, to externalise react
and react-dom
packages:
Special Notes for React
react
andreact-dom
packages still need to be installed as your package's dev dependencies as they're used by@vitejs/plugin-react
.react
andreact-dom
should be added to thedependencies
array when enqueueing the script (see example above).
Example plugins
- React: https://github.com/kucrut/vite-for-wp-example-react
- Svelte: https://github.com/kucrut/vite-for-wp-example-svelte
- Vanilla JS: https://github.com/kucrut/vite-for-wp-example-vanilla-js
- Vue: https://github.com/kucrut/vite-for-wp-example-vue
Limitations
Currently, this package doesn't provide HMR support for building editor blocks yet.