Javascript ES6 Modules

Javascript
1

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:

2

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:

3

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
4

I finally made time and put together a quick repo that uses Vite in lib mode to bundle ES6 modules.

Here are the instructions:

  1. Open your terminal/command prompt & cd navigate to your desired location

  2. Run git clone https://github.com/TechAkayy/my-pg-vite-project. Instead of directly cloning, you could fork it first and then clone it from your github account.

  3. Open the cloned project in your favourite code editor like VS code and use it’s integrated terminal to run npm install to install all the dependencies.

  4. Open vite.config.js and you can notice the three entries (ES modules) under the “build/lib” section. Each of them are compiled into the “dist” folder.

  5. You can play around with the config, turn off minify, turn on sourcemap, change mode to “production”.

  6. The project has three examples (under the examples folder). Each example has a sample html page that has their respective compiled js file added using a script tag.

  7. In the package json, you can notice a “watch” command that builds the ES modules & watch for any changes & recompile them when updated.

  8. In your terminal or the integrated terminal (in VS code), run npm run watch. Now check the dist folder and you can see the compiled js files.

  9. Instead of the “watch” command, you can use the “dev” command (see package.json) as npm run dev which will both “watch” as well as spin-up the Vite server to view the sample html files consuming the compiled js.

  10. Open the dev-server url in your browser (usually http://localhost:5174)

In Pinegrow,

  1. Open the project.

  2. Open examples/bs5/bs5.html to design this bootstrap page. Whenever you update the corresponding es module file (b5.js), you will have to refresh the page in Pinegrow to load the re-compiled version.

  3. Open examples/vuetify/vuetify.html. In the tree panel, under tag “v-app”, add the below code (see vuetify.js for the state used in these tags). The vue app mounts to the div with id “app”.

    <v-carousel v-model="model">
      <v-carousel-item v-for="(color, i) in colors" :key="color">
        <v-sheet :color="color" height="100%" tile>
          <v-row class="fill-height" align="center" justify="center">
            <div class="text-h2">Slide {{ i + 1 }}</div>
          </v-row>
        </v-sheet>
      </v-carousel-item>
    </v-carousel>
  1. Save and refresh the page. We need to refresh because the v-tags are dynamic js components. Check vuetify docs to have more fun.

Note: We are using Vite only for bundling ES modules, and using the dev-server to just view the sample html pages in an external browser.

HMR is supported in component-based frameworks like Vue, React, Svelte etc., not with vanilla javascript updates, unless it’s explicitly handled by the user.

Please share your experience, looking forward to your feedback. Cheers!

cc: @fakesamgregory, sorry it took a while to find time & draft this up, hopefully you already cracked it :slight_smile:

1 Like
5

I’m not a wordpress person, I’m curious to know if someone was able to load the compiled vuetify.js and the div#app of vuetify.html (along with the link to vuetify’s css in its head) and use them in your wordpress page :thinking: Probably styles scoping will be required!

6

I didn’t try it yet, but i don’t think that i ever want to use vuetify on a wordpress page to be honest. I don’t know why, but it doesn’t feel right for me :smiley:

1 Like