OpenFL Plugin for Vite 1.0

Vite is a relatively new build tool in the JavaScript and web ecosystem that's growing in popularity, and organizations that use Vite may want to integrate an OpenFL or Feathers UI frontend into their existing build process. With that in mind, today, I'm releasing a new OpenFL Plugin for Vite.

This is just one of many projects that I'm releasing as part of the Feathers UI v1.0 release week celebration.

Haxe and OpenFL already bundle all of the generated JavaScript into a single minified file already, so why would you want to use Vite? (or Webpack?)

• In an organization already making heavy use of Vite, it is helpful if there's a way to integrate OpenFL into common workflows.
• The Vite ecosystem offers a ton of plugins to process and enhance JavaScript, HTML, and CSS files. These tools make it possible to go beyond the default capabilities of the Haxe compiler when targeting the web.
• Many modern teams have switched to JS modules, which are enhanced by some of Vite's more advanced capabilities, like code splitting and tree shaking. With Haxe, you can use a library like Genes to modify the output of the compiler to generate JS modules instead of a classic script — allowing you to take advantage of everything that Vite has to offer.

Using vite-plugin-openfl v1.0.0

You need to install a few npm dependencies and then configure the plugin in your vite.config.js file. Then, build normally with Vite.

First, install dependencies from npm:

npm install --save-dev vite vite-plugin-openfl

Then, configure your a vite.config.js file to use vite-plugin-openfl:

import { defineConfig } from "vite";
import openflPlugin from "vite-plugin-openfl";

export default defineConfig({
  plugins: [openflPlugin()],
});

Additionally, there are a couple of sample projects on Github to help you get started. The basic project uses the default output from the Haxe compiler, and the genes project uses Genes to generate JS modules and load a code-split module at runtime. There's also a rollup project sample that demonstrates how to uses the plugin with Rollup instead of Vite (Vite and Rollup have similar APIs, and plugins can be made compatible with both).

Questions or comments?

If you need some help, or want to give feedback, feel free to create a thread in either the Feathers UI Community forum or the OpenFL Community forum.