Question

在我正在开发的应用程序中，有时需要导出一个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' });
}

在script.js中：

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

export default script;

当然，我要注入的脚本要复杂得多，并且还具有依赖性。但它不会根据应用程序的状态而改变。

我今天要做的是：创建一个带有脚本及其依赖项的辅助项目，从中生成一个生产版本（最小化），然后将所有这些新代码复制并粘贴为一个字符串在script变量中。对于维护而言，这不是完美的选择。

有没有一种方法可以做到与众不同呢？例如，有没有一种方法可以从真实脚本中创建Blob，并执行类似的操作：

在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')
}

如何在前端创建JS脚本的Blob

0 个答案: