搭一个epub在线阅读器吧

没啥特别的：Webpack( TypeScript + React + antd + epubjs + IndexDB )

一个想法

以前一直用 pdf 读书，偶然下载了 .epub 格式，发现这个才是正确的阅读格式——正确与否，在于它是否符合正确的阅读方法和习惯——做笔记、笔记查找、全文搜索、横向翻页等等。回头一看，pdf 拉低了阅读效率好多年！

因为最近想为脑袋补窟窿，所以想“博览”下群书。但是桌面软件不如浏览器用着爽，于是想，干脆弄个在线阅读器吧。

网上查了下，做阅读器的不少。有了各种开源库，其实做起来也不难。正好.epub格式有epubjs 开源库支持，那么这件事就可以愉快的开始了。

对了，参考的原型是 iBook。

搭建项目

我想说说搭建项目的过程，尽管简单复杂的项目都经历过，但若想变换点什么东西，还是免不了一把鼻涕一把泪。
这里有个前提，TypeScript 很久没写过了，上一个纯TypeScript尝试项目是2017年。TypeScript + react 的搭建没具体操作过。

从我熟知的出发，一开始定的技术组合是：TypeScript + react + antd + epubjs + indexedDB。
redux显然可以不急着考虑，dva算了吧用不着。我没有服务器，所以数据持久化就交给indexedDB吧。reactorvue，TypeScript下还没用过vue，那还是react吧。我只想快速实现原型，不想掉到那些鬼坑里去。

差不多就这样了。在jQuery + Bootstrap时代，哪用得着考虑这么多啊，一个页面早就跑起来了。

Webpack 构建

回过头来我在想，是不是先选择构建方式，在考虑技术组合细节会比较好一点？但是事实上我不是这样进行的。

脚手架我有两个选择：我们自己人封装的 jsrock vs create-react-app。自己的熟悉且方便。开源出来的大多喜欢把webpack的配置隐藏起来，看不到webpack配置细节，让人有点不放心的感觉，所以还是决定用我们自己的jsrock 。

——哦呵，jsrock选择typescript项目，安装、运行、报错！看起来是css-in-js部分出错了——，于是找了下文档，发现用上react-jss的话，会更简洁。

算了css-in-js我也不要了，就用scss吧。然后从已有的webpack + typescript自己手动补全构建环境吧。

TypeScript 的环境配置问题，一大来源是在webpack的配置脚本也是用ts写的，而webpack.config.ts的运行环境是node，所以存在模块系统不兼容的问题。
另外比较多的问题是要安装@type/xxx。当然，期间遇到了一个奇葩问题：

ERROR in ./src/index.tsx
Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for /Users/...

// Solved by https://github.com/wmaurer/react-transform-boilerplate-ts/issues/7

有人说: 加上 "noEmit": true, it works。又有人说移除它 it works。所以我经历了添加有移除，最后移除是对的。

declare module "*.json" {
    const value: any;
    export default value;
}

declare module '*.scss' {
    const content: any;
    export default content;
}  

这里是 stackoverflow 解释 importing-json-file-in-typescript

好了，七七八八的小坑填完后，已经花了我4～5个小时。但随着后续的优化——对的，优化调整——发现 webpack + typescript 还有坑要填，此处暂时不表。

项目托管

github, gitlab, gitee。

其实到这一步，一个项目闭环就完成了。
1、想法
2、搭建（编码）
3、分享
后续将按这个循环持续迭代就好了。

功能模块

[x] 需要路由
[x] 需要数据持久化（部分完成）

实现 epub

这里才是在线阅读器的核心。
看了下 epubjs API 还挺多的，需要照着原型，分步实现。

项目优化 todo

最常见的优化，都集中在 webpack 构建这块，比如对代码的拆分split code，代码动态注入也叫懒加载lazy load，css + js代码压缩等。

这些改进等之后再加进来：
1、babel-plugin-import 改进 https://segmentfault.com/a/1190000019983303
2、indexedDB https://segmentfault.com/a/1190000006924681
https://www.cnblogs.com/yunxian-19/p/6484397.html

webpack js 懒加载

webpack + typescript 下使用dynamic import特性，需要配置：

// tsconfig.json
 "module": "esnext"

反之，typescript版的 webpack.config.ts 脚本运行于 node 下，又需要：

// tsconfig.json
 "module": "commonjs"

总之这里查了很多解决办法，最后不得不将改回 webpack.config.js，并且配置成下面这样才罢了。

"module": "esnext",
"include": ["src"],

数据可视化

todo

换肤

todo