VITE bundler?

Is anybody using VITE?

I mean this https://vitejs.dev/

Yeah, all those templates in @ki-themes’s link are using Vite. I use it every day, I recommend it above any other, 100%.

Great!

Hiw can I exclude an module script from the build, this script is added in the index.html file and it hav3 code in it that I want to remain in the built index.html file, now it is adding it in the main built .js file.

Any help is appreciated!

Yes, simply place the script inside the public directory (or wherever your other assets such as your favicon are). Then you can import it into index.html like normal, e.g. for /public/script.js:

<script src="/script.js"></script>

I have something like this in the index.html file, I would like to remain there where I build the project not to be added inside the built .js file and I can’t use it as an external script.

script type="module"> // My code here! /script>

Unfortunately, only non-module script tags are preserved in the index.html file. If you absolutely must preserve a module script, you can write a plugin to add it to the index.html during building. There’s an example here: Adding a script tag to index.html to avoid stale js bundle and integrate...

Thank you but this is a bit too much for me now… I don’t understand nada from that plugin :slight_smile:

Can you guys help me with something I am lost…

In the VITE project, I have a class like this

export default class FWDPAP

After the project is built this is modified by VITE like this

const _FWDPAP = class

How to instantiate this?

If I try new FWDPAP I get an error, if I try new _FWDPAP I still get an error.

What I am missing here?

Thank you.

You can’t access bundled code from the outside, and there is no guarantee that your class will always be renamed in that exact way. You generally will only interact with your classes from inside the bundle. If you find yourself needing to do otherwise then your architecture is most likely incorrect.

However, this is your code and you can ultimately tell it to do whatever you’d like. And that includes making a class constructor available globally via the window object for consumption from other scripts (including non-module scripts and even the browser’s dev tools console):

export default class FWDPAP {}
window.FWDPAP = FWDPAP;

It’s important to note that this constructor won’t be available until the bundle is executed, so be careful not to introduce race conditions into your app.

Thank you for the info.

Your solution worked!