前端用electron制作打包一个epub阅读器

最近一个月开始做一个epub阅读器的项目。起因是上班时中途下载了一个epub阅读器，结果每看一两页就需要看一个会员广告，很心烦，就想着自己动手做一个，因为本职前端，所以直接做的electron项目。

支持用户上传epub文件：

返回文件信息和目录:

支持滚动阅读：

基本逻辑是用nodejs开启一个后台服务，支持用户上传epub文件，上传后通过xml解析获取文件基本信息和全书图片并将其存在本地文件夹中。在每次用户获取新的章节时，用ejs模板引擎生成一个基于本章节的页面，实现页面更新。

ps: ui都是黑色是为了和我本地的主题颜色相匹配，方便随时摸鱼。

开源地址

我已经把项目上传到GitHub上了，欢迎大家给我点一点小星星！（真的需要！感谢！）

软件下载： github.com/daria2023/e...
源码： github.com/daria2023/e...

项目搭建

文件解析在做第一版的时候我当时直接使用的框架epub，用到后来测试的书越多，就发现很多书的图片没有办法正常加载，后来下载源码看了看发现这个框架主要也是使用的admzip这个框架将epub文档解压后进行处理的。所以我就弃用epub框架开始直接使用adm-zip这个解压工具处理文档了。这一步确实不难，最重要的就是自己多下载测试几本书，多研究epub解压后的xml文件，然后根据自己的实际需要获取文件发表信息或者章节内容、图片等信息。
文件读写其余比较多的操作都是利用node:fs读写文件的一些操作，这一部分操作最重要的就是要注意文件的读写都是需要时间的，怎么进行同步异步操作和怎么进行错误处理就要小心。例如，我在本地保存了一份json文件来存储已经加载进来的文件以及目录等信息，在查看本地文件时，我是通过返回一个promise的形式来对获取到的文件信息进行返回的，path是json文件的路径，param是查看json文件的根字段，在根字段下我是以书名bookName作为索引保存文件信息的。

js 复制代码

const checkLocalFile = (path, param, bookName) => {  
  return new Promise((resolve, reject) => {  
    try {  
      fs.readFile(path, { encoding: "utf-8" }, (err, data) => {  
        const jsonFile = JSON.parse(data);  
        const isLoaded = jsonFile[param][bookName];  
        if (isLoaded) {  
          resolve({  
            code: 200,  
            value: true,  
            data: jsonFile[param][bookName],  
          });  
        } else {  
          resolve({  
            code: 400,  
            value: false,  
          });  
        }  
      });  
    } catch (e) {  
      resolve({  
        code: 400,  
        value: false,  
      });  
    }  
  });  
};

项目打包：整体而言项目开发的过程其实还算轻松，但是打包时出现了很多问题，例如我本来使用的express进行项目静态文件托在开发环境还正常，打包好后还是出现了对静态文件发起网络请求的问题，后来打包过程中我是通过拦截全部路由并通过后缀进行判断返回静态文件的：

js 复制代码

app.all('*', function (req, res, next) {  
  const requestedFile = req.url.split('/');  
  const len = requestedFile.length;  
  const lastPath = requestedFile[len - 1];  
  if(lastPath.endsWith('.css')|| lastPath.endsWith('.js') || lastPath.endsWith('.ico') ){  
    res.sendFile(path.join(staticHolder,lastPath));  
  } else {  
    next()  
  }  
})

打包过程还涉及文件夹暴露在app.asar之外等其他问题，如果之后有时间，单独写一篇我利用electron-builder打包过程中遇到的问题。

祝大家多多摸鱼！摸鱼愉快！