最近在做一个类似离线包的需求，平时我们正常工作中是开发完成一个完整的SPA之后打包上线。由于我们暂时没有服务器的资源，所以目前采取的一个方案是把这个SPA打包为一个zip包，然后上传至CDN,别人用的时候直接从CDN拉包然后解压就可以了，这个方案类似于开发一套完整的离线包流程，其中用到了jszip这个在压缩领域最牛的库，其中也遇到了不少坑，特此总结记录一下。

常用API

官方文档已经很详细的给出了各种API的demo，但是只是很简单的demo，与我们开发中遇到的实际场景还是千差万别的，这个库牛逼的地方在于支持各种类型的资源uint8array,blob,arraybuffer,nodebuffer,string等，而且API都是promise风格，所以使用起来非常舒服，简单看几个例子，详情可去看文档；

const zip = new JSZip();

// create a file
zip.file("hello.txt", "Hello World\n");

// create a file and a folder
zip.file("nested/hello.txt", "Hello World\n");
zip.folder("nested").file("hello.txt", "Hello World\n");

// access the file content
zip.file("hello.txt").async("string").then(function (data) {
  // data is "Hello World\n"
});

// remove a file or folder
zip.remove("nested/hello.txt");
zip.remove("nested");

// generate a zip file
var promise = null;
if (JSZip.support.uint8array) {
  promise = zip.generateAsync({type : "uint8array"});
} else {
  promise = zip.generateAsync({type : "string"});
}

// read a zip file
zip.loadAsync(content)
.then(function(zip) {
    zip.file("hello.txt").async("string"); // a promise of "Hello World\n"
});

压缩资源

开发完成一个项目后一般会把资源打包到dist目录中，所以我们需要把dist整个文件夹最终打包为一个zip包，需要两步操作：

读取dist目录中的每个文件；

function readDir(zip, dirPath) {
  // 读取dist下的根文件目录
  const files = fs.readdirSync(dirPath); 
  files.forEach(fileName => {
    const fillPath = dirPath + "/" + fileName;
    const file = fs.statSync(fillPath);
    // 如果是文件夹的话需要递归遍历下面的子文件
    if (file.isDirectory()) {
      const dirZip = zip.folder(fileName);
      readDir(dirZip, fillPath);
    } else {
      // 读取每个文件为buffer存到zip中
      zip.file(fileName, fs.readFileSync(fillPath));
    }
  });
}

生成一个压缩包；

function generateZip() {
  const sourceDir = path.join(__dirname, "../dist");
  readDir(zip, sourceDir);
  zip.generateAsync({
    type: "nodebuffer", // 压缩类型
    compression: "DEFLATE", // 压缩算法
    compressionOptions: { // 压缩级别
      level: 9
    }
  }).then(content => {
    const dest = path.join(__dirname, "../zip");
    // 删除旧包目录
    del.sync([dest])
    // 创建新包目录
    fs.mkdirSync(dest, {
      recursive: true
    });
    // 把zip包写到硬盘中，这个content现在是一段buffer
    fs.writeFileSync(`${dest}/lewis.zip`, content); 
  });
}

解压资源

需要使用该SPA的时候，直接从CDN拉取这个zip包进行解压即可使用，解压包同样分为两步操作：

从CDN获取zip文件并解压；

function getZipFiles(zipUrl) {
  const response = await axios({
    method: 'get',
    url: zipUrl,
    responseType: 'arraybuffer'  // 类型必须为arraybuffer
  });
  // loadAsync加载其他类型资源会出问题，比如资源乱码
  const zipData = await JSZip.loadAsync(response.data);
  return zipData.files;
}

把解压后的资源写进硬盘；

function saveZipFiles(savePath) {
  // 获取解压后的文件
  const files = await getZipFiles(zipUrl)
  try {
    for (const filename of Object.keys(files)) {
      const dest = path.join(__dirname, savePath, filename);
      // 如果该文件为目录需先创建文件夹
      if (files[filename].dir && !isDirSync(dest)) {
        fs.mkdirSync(dest, {
          recursive: true
        });
      } else {
        // 把每个文件buffer写到硬盘中 
        files[filename].async('nodebuffer')
          .then(content => fs.writeFileSync(dest, content));
      }
    }
  } catch (error) {
    console.error('save zip files encountered error!', error.message);
    return error;
  }
}

注意

处理zip包的整个过程建议直接都使用buffer，尽量避免用string，转来转去容易导致乱码问题，且buffer体积小易存储与jszip无缝处理，还有就是在上传CDN的时候也直接上传buffer，我当时转为字符串上传导致拉下来时解压包失败了，注意fs.readFileSync()的用法，加参数会返回字符串，直接读取一个zip包为字符串直接就是乱码的。

/**
 * 获取文件内容
 * @param file
 * @returns string
 */
function getFileContent(file) {
  if (fs.existsSync(file)) {
    const pkg = fs.readFileSync(file, 'utf-8')
    return pkg
  } else {
    return null
  }
}

/**
 * 获取文件内容
 * @param file
 * @returns buffer
 */
function getFileBuffer(file) {
  if (fs.existsSync(file)) {
    const pkg = fs.readFileSync(file)
    return pkg
  } else {
    return null
  }
}

后记

这个需求其实看似很简单，真正开发时在不同的场景里还是有些坑的，尤其在node开发时注意buffer的使用问题，避免一些非必要的字符串读写,还有就是node中一些同步API的使用，趁着今天休息把这个小需求记录下来，分享给之后有需要的各位同行！

更多精彩内容欢迎关注我的公众号【天道酬勤Lewis】