Introduction

JavaScript & TypeScript

This theme leverages Vite for bundling and compiling TypeScript and JavaScript assets. Entry points for the bundling process are specified in the vite.config.js file under the build.rollupOptions.input property.

For example, the theme defines two entry points:

• frontend: ./assets/src/js/frontend.js
• backend: ./assets/src/js/backend.js

After bundling, the compiled assets are output to the ./assets/public/ directory.

Tip

Adjust the entry points in vite.config.js to match your project’s structure as needed.

Including packages

Vite JS uses ES Modules. This means you cannot use the require() method to include packages. You’ll have to convert this to the ES Modules syntax:

import { someMethod } from 'my-dep'

SCSS

SCSS files are handled by Vite and the vite-plugin-sass-glob-import plugin, which allows for glob imports in SCSS files. Autoprefixer is also used as a PostCSS plugin to add vendor prefixes to CSS rules. The compiled CSS is included in the bundled assets output by Vite.

Adding support for other CSS Pre-processors

This is really easy to do with Vite. Just install the pre-processor as a Dev dependency, and you’re ready to go!

# include .scss and .sass (included by default in the theme)
npm add -D sass

# include .less
npm add -D less

# include .styl and .stylus
npm add -D stylus

Enqueueing assets

The project uses a custom method Best4u\BlocksyChild\Vite::enqueueAsset() to enqueue the compiled assets in the WordPress theme. This method takes a relative path to the asset and enqueues both the script and the associated styles.

The frontend.js and backend.js assets are already enqueued in the inc/enqueue.php file:

// ...

add_action('wp_enqueue_scripts', function () {
    // This automatically loads the css files included in the js file.
  \Best4u\BlocksyChild\Vite::enqueueAsset('/assets/src/js/frontend.js');
}, PHP_INT_MAX);

add_action('admin_enqueue_scripts', function () {
    // This automatically loads the css files included in the js file.
    \Best4u\BlocksyChild\Vite::enqueueAsset('/assets/src/js/backend.js');
}, PHP_INT_MAX);

// ...

Development and Production Builds

For development, running npm run dev starts the Vite development server, which includes Hot Module Replacement (HMR). For production, npm run prod is used to bundle and compile the code and assets. There’s also a npm run prod:watch command for watching changes in production mode.

Note

You can only run npm run dev on local machine not on a development server. For this use npm run prod or npm run prod:watch

Available scripts

All of these should be prefixed by npm run (e.g. npm run prod) in the command line.

• clean - This will clean the public assets directory.
• dev - Starts the Vite development server.
• prod - Bundles/compiles the code and assets (images, audio files, etc.).
• prod:watch - Bundles/compiles the code and assets (images, audio files, etc.) and watches for changes.

Adding extra entry points to the bundler

This can be done by editing the vite.config.js file. You can add as many entry points as you want. Just make sure to add the entry point to the build.rollupOptions.input object.

export default defineConfig(({ command }) => ({
  // ...
  build: {
    // ...
    rollupOptions: {
      input: {
        frontend: './assets/src/js/frontend.js',
        backend: './assets/src/js/backend.js',
      },
    },
  },
  // ...
}))