Javascript ES6 Modules

I’m wondering how others build/bundle/create their javascript files in a Wordpress Theme. Are you using seperate Files, are you writing everything in one big file? I was just thinking about using ES6 Modules and then bundling everything together into one file which get’s enqueued everywhere. What’s your experience in doing it? Does anyone know of a comfort way to use Vite in that combination? As far as I know vite will need a index.html file in their process, which will leave up a bit trash when not using it correctly I guess! :wink:

Are there any other solutions out there someone has made experience with (webpack i.e.?!).

I’ve always used predefined processes so far (vue/angular cli or vite for example) and customized only a little bit. I’ve never done anything with javascript files only for example and I am just about to take my first steps in that direction, so any recommendations/experiences are welcome to avoid unnecessary learning curves! :smiley:

TIA :wink:

I have used webpack for a long time to bundle my es6 modules. It works great, uses babel plugin.

You can use Vite as well. It has a lib mode.

The challenge I have faced with Vite is the inability to use commonjs npm modules, but if you are not having such dependencies and using primarily to bundle just your code, it should work great.

Again, you need Vite only if want a dev-server with hmr. Vite uses esbuild underneath, so if you want to just run in watch mode and continuously bundle into a disk location, you could directly use esbuild itself.

Btw, I don’t know about how you integrate with wordpress. Share your experience :smiley:

Hey akayy,
Thanks for your response. For that project i tried webpack and it works great so far.

I’m using it for custom JS and for extracting specific bootstrap components (off canvas for example) and bundle them together with my custom JS.

I will definitely try your tips too, es build looks promising.

Im gonna share a video when the process is more baked, but it’s pretty cool to integrate it that way in my opinion! :wink:

1 Like