Download the PHP package southcoastweb/vite-for-wp without Composer
On this page you can find all versions of the php package southcoastweb/vite-for-wp. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download southcoastweb/vite-for-wp
More information about southcoastweb/vite-for-wp
Files in southcoastweb/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
:
If you have multiple entrypoints to build, pass an object as the first parameter:
Pass a configuration object as the third parameter if you need 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 JS package depends on one or more WordPress modules (eg. @wordpress/i18n
), you can define them as externals with the help of rollup-plugin-external-globals
.
Note that you will need to add them to the dependencies
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/catatan
Limitations
Currently, this package doesn't provide HMR support for building editor blocks yet.