搭一個epub在線閱讀器吧

沒啥特別的：Webpack( TypeScript + React + antd + epubjs + IndexDB )

一個想法

以前一直用 pdf 讀書，偶然下載了 .epub 格式砰逻，發(fā)現(xiàn)這個才是正確的閱讀格式——正確與否鸣驱，在于它是否符合正確的閱讀方法和習(xí)慣——做筆記、筆記查找蝠咆、全文搜索踊东、橫向翻頁等等北滥。回頭一看闸翅，pdf 拉低了閱讀效率好多年再芋！

因為最近想為腦袋補窟窿，所以想“博覽”下群書坚冀。但是桌面軟件不如瀏覽器用著爽济赎，于是想，干脆弄個在線閱讀器吧记某。

網(wǎng)上查了下联喘，做閱讀器的不少。有了各種開源庫辙纬，其實做起來也不難。正好.epub格式有epubjs 開源庫支持叭喜，那么這件事就可以愉快的開始了贺拣。

對了，參考的原型是 iBook捂蕴。

搭建項目

我想說說搭建項目的過程譬涡，盡管簡單復(fù)雜的項目都經(jīng)歷過，但若想變換點什么東西啥辨，還是免不了一把鼻涕一把淚涡匀。
這里有個前提，TypeScript 很久沒寫過了溉知，上一個純TypeScript嘗試項目是2017年陨瘩。TypeScript + react 的搭建沒具體操作過。

從我熟知的出發(fā)级乍，一開始定的技術(shù)組合是：TypeScript + react + antd + epubjs + indexedDB舌劳。
redux顯然可以不急著考慮，dva算了吧用不著玫荣。我沒有服務(wù)器甚淡，所以數(shù)據(jù)持久化就交給indexedDB吧。reactorvue捅厂，TypeScript下還沒用過vue贯卦，那還是react吧。我只想快速實現(xiàn)原型焙贷，不想掉到那些鬼坑里去撵割。

差不多就這樣了。在jQuery + Bootstrap時代辙芍，哪用得著考慮這么多啊睁枕，一個頁面早就跑起來了。

Webpack 構(gòu)建

回過頭來我在想，是不是先選擇構(gòu)建方式外遇，在考慮技術(shù)組合細(xì)節(jié)會比較好一點注簿？但是事實上我不是這樣進(jìn)行的。

腳手架我有兩個選擇：我們自己人封裝的 jsrock vs create-react-app跳仿。自己的熟悉且方便诡渴。開源出來的大多喜歡把webpack的配置隱藏起來，看不到webpack配置細(xì)節(jié)菲语，讓人有點不放心的感覺妄辩，所以還是決定用我們自己的jsrock 。

——哦呵山上，jsrock選擇typescript項目眼耀，安裝、運行佩憾、報錯哮伟！看起來是css-in-js部分出錯了——，于是找了下文檔妄帘，發(fā)現(xiàn)用上react-jss的話楞黄，會更簡潔。

算了css-in-js我也不要了抡驼，就用scss吧鬼廓。然后從已有的webpack + typescript自己手動補全構(gòu)建環(huán)境吧。

TypeScript 的環(huán)境配置問題致盟，一大來源是在webpack的配置腳本也是用ts寫的碎税，而webpack.config.ts的運行環(huán)境是node，所以存在模塊系統(tǒng)不兼容的問題馏锡。
另外比較多的問題是要安裝@type/xxx蚣录。當(dāng)然，期間遇到了一個奇葩問題：

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萎河。所以我經(jīng)歷了添加有移除，最后移除是對的蕉饼。

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

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

這里是 stackoverflow 解釋 importing-json-file-in-typescript

好了虐杯，七七八八的小坑填完后，已經(jīng)花了我4～5個小時昧港。但隨著后續(xù)的優(yōu)化——對的擎椰，優(yōu)化調(diào)整——發(fā)現(xiàn) webpack + typescript 還有坑要填，此處暫時不表创肥。

項目托管

github, gitlab, gitee达舒。

其實到這一步值朋，一個項目閉環(huán)就完成了。
1巩搏、想法
2昨登、搭建（編碼）
3、分享
后續(xù)將按這個循環(huán)持續(xù)迭代就好了贯底。

功能模塊

[x] 需要路由
[x] 需要數(shù)據(jù)持久化（部分完成）

實現(xiàn) epub

這里才是在線閱讀器的核心丰辣。
看了下 epubjs API 還挺多的，需要照著原型禽捆，分步實現(xiàn)笙什。

項目優(yōu)化 todo

最常見的優(yōu)化，都集中在 webpack 構(gòu)建這塊胚想，比如對代碼的拆分split code琐凭，代碼動態(tài)注入也叫懶加載lazy load，css + js代碼壓縮等浊服。

這些改進(jìn)等之后再加進(jìn)來：
1统屈、babel-plugin-import 改進(jìn) 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"],

數(shù)據(jù)可視化

todo

換膚

todo