В приложении, которое я разрабатываю, мне нужно в какой-то момент экспортировать ZIP-файл, содержащий и index.html, и script.js. index.html создается в зависимости от состояния приложения, и у меня нет проблем с ним. Однако script.js является для меня большей проблемой: я не знаю, как включить его в ZIP-файл. Позвольте мне показать вам весь процесс:
В 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;
Конечно, скрипт, который я хочу внедрить, намного сложнее, и также имеет зависимость. Но это не меняется в зависимости от состояния приложения.
Что я делаю сегодня: создаю сторонний проект со сценарием и его зависимостями, производим из него производственную сборку (минимизированную) и копируем, вставляем весь этот новый код в виде строки в переменную script.
Это не идеально подходит для обслуживания ...
Есть ли способ сделать по-другому, только с внешнего интерфейса?
Например, есть ли способ создать блоб из реального скрипта и сделать что-то подобное:
В 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' });
}
В script.js
const doSomething = () => {
console.log('I do something')
}