Vite Block is an experimental WordPress block development repository that explores the usage of Vite as a replacement for webpack, leveraging its advantages in ES module (ESM) support, faster build times, and efficient development workflows.
To get started, clone this repository and navigate to the project directory.
git clone https://github.com/your-username/vite-block.git
cd vite-block
Install the dependencies using npm:
npm install
npm run packages-update
: Update WordPress packages using wp-scripts.npm start
: Build the project with TypeScript and Vite, watching for changes.npm run build
: Build the project with TypeScript and Vite.npm run dev
: Run the development server with Vite.npm run lint
: Lint the project using ESLint.npm run wp-env:start
: Start the WordPress development environment.npm run wp-env:stop
: Stop the WordPress development environment.npm run wp-env:destroy
: Destroy the WordPress development environment.npm run plugin-zip
: Package the plugin for distribution.
@types/node
: TypeScript definitions for Node.js.@types/react
and@types/react-dom
: TypeScript definitions for React.@types/wordpress__block-editor
and@types/wordpress__blocks
: TypeScript definitions for WordPress block editor and blocks.@typescript-eslint/eslint-plugin
and@typescript-eslint/parser
: ESLint plugin and parser for TypeScript.@vitejs/plugin-react
: Vite plugin for React.@wordpress/block-editor
and@wordpress/blocks
: WordPress block editor and blocks packages.eslint
,eslint-plugin-react-hooks
,eslint-plugin-react-refresh
: ESLint and plugins for React linting.sass
: Sass compiler.terser
: JavaScript minifier.typescript
: TypeScript compiler.vite
: Vite bundler for faster development.vitest
: Test runner for Vite.
- Run
npm start
to start the development server. - Develop your WordPress blocks using Vite's fast development environment.
- Test and lint your code using
npm run dev
andnpm run lint
. - Package your plugin for distribution using
npm run plugin-zip
.
Feel free to contribute to this experimental project by opening issues, suggesting enhancements, or submitting pull requests. Your feedback and contributions are highly appreciated.
This project is licensed under the GPL-2.0-or-later license. See the LICENSE.md file for details.
Thank you for checking out Vite Block! Happy coding!
<script type="module" src="http://localhost:5173/@vite/client"></script> <script type="module" src="http://localhost:5173/main.js"></script>`and this has to be appended before the above scripts
<script type="module"> import RefreshRuntime from 'http://localhost:5173/@react-refresh' RefreshRuntime.injectIntoGlobalHook(window) window.$RefreshReg$ = () => {} window.$RefreshSig$ = () => (type) => type window.__vite_plugin_react_preamble_installed__ = true </script>
-->