How to create a blob of a JS script in front-end

In the app I am developing, I need at some point to export a ZIP File containing and index.html and a script.js. The index.html is created depending on the app state, and I have no problem with it. The script.js however is more a problem to me: I don’t know how to include it in the ZIP file. Let me show you the whole process:

In createZipFile.js :

 import JSZip from 'jszip'; import script from './script';  const createHtml = (data) => `<html lang="en"><head><meta charset="UTF-8"></head><body>$  {data}</body><script type="text/javascript">$  {script}</script></html>`  const createZIPFile = async (data) => {   const zip = new JSZip();   zip.file("index.html", createHtml(data));   return await zip.generateAsync({ type: 'blob' }); }  

In script.js :

const script = `   const doSomething = () => {     console.log('I do something')   } `;  export default script;  

Of course, the script I want to inject is much more complex, and also it has a dependency. But it does not change depending on the state of the app.

What I do today is: create a side project, with the script and its dependencies, make a production build out of it (minified), and copy paste all this new code as a string in the script variable. It’s not perfect for maintenance…

Is there a way to do differently, only from the front-end ? For example, is there a way to create a blob out of a real script, and do something like that :

In createZipFile.js :

 import JSZip from 'jszip'; import script from './script';  const createHtml = (data) => `<html lang="en"><head><meta charset="UTF-8"></head><body>$  {data}</body><script type="text/javascript" src="/script.js"></script></html>`  const createZIPFile = async (data) => {   const zip = new JSZip();   zip.file("index.html", createHtml(data));   zip.file("script.js", script);   return await zip.generateAsync({ type: 'blob' }); }  

In script.js

const doSomething = () => {   console.log('I do something') }