angular-electron集成rxdb数据库

Angular-Electron集成Rxdb数据库(全流程)

1、克隆angualr-electron

git clone https://github.com/maximegris/angular-electron.git

克隆下来之后不要着急去下载依赖，可以先把想把一些基本的配置修改下，例如：

• 文件夹的名称，修改成项目名

• package.json的信息修改下，如：name,version,description,keywords,author等

• README.md

诸如此类，将一些信息修改成自己的项目信息。

之后在进行：

# 下载项目依赖
npm install
# 若npm下载很慢，可以更换npm的镜像源

#运行项目
npm start

2、集成Rxdb

rxdb官方文档

我们首先要对Rxdb有一个基本的了解，知道是什么，能干什么，大概的用法，从官方文档上了解到这些之后，我们就可以按照以下流程进行集成配置了。

Rxdb的使用不复杂，语法也很简单，若是你了解过Mongodb，那么对Rxdb的语法，想必你就能很快上手。

2.1、下载Rxdb依赖

npm install rxdb --save

#因为angular-electron中已经包含了rxjs所以就不用再下载，否则仍需执行
npm install rxjs --save

# 下载polyfill补丁
npm i @babel/polyfill --save

然后根据文档提示再polyfill中配置下代码：

(window as any).global = window;
(window as any).process = {
    env: { DEBUG: undefined },
};

2.2、配置Rxdb

配置Rxdb需要查看rxdb官方文档rxdbStorage一节。

• 关于RxStorage的介绍我就不再赘述了，我这里选用的是RxStorage中的PounchDB RxStorage，一个基于PounchDB的数据库。

• 它有大量的适配器供我们选择，由于我们是向electron中进行集成，electron本身集成了nodejs环境，所以这里我选择了基于nodejs的文件系统适配器leveldown。

根据文档提示，使用leveldown适配器，我们还需下载相关依赖：

npm install leveldown --save
# 同时可以下载到leveldown的类型编译文件
npm install @types/leveldown --save-dev

npm install pouchdb-adapter-leveldb --save
# 同时可以下载到pouchdb-adapter-leveldb的类型编译文件
npm install @types/pouchdb-adapter-leveldb --save-dev

---

注：以上下载均在项目根目录下完成。

除此之外，我们还需要在项目根目录的下的app目录(注意：不是src的app目录)下，再次下载leveldown

---

依赖下载完成后，配置过程如下：

1. 在src/app目录下新建文件夹database（这是我的习惯，名字可以随意取）

2. 在database文件下，新建一个createdb.ts文件

3. 在createdb.ts文件夹内，填写如下内容：

   import { addRxPlugin, createRxDatabase } from 'rxdb';
   import { addPouchPlugin, getRxStoragePouch } from 'rxdb/plugins/pouchdb';
   import { RxDBJsonDumpPlugin } from 'rxdb/plugins/json-dump';
   import * as pouchdbAdapterLeveldb from 'pouchdb-adapter-leveldb';
   import * as leveldown from 'leveldown';
   
   addPouchPlugin(pouchdbAdapterLeveldb);
   addRxPlugin(RxDBJsonDumpPlugin);
   
   // 创建数据库
   const createdb = async () => {
       return await createRxDatabase({
           name: 'D:/dbtest/',
           storage: getRxStoragePouch(leveldown),
           password: 'TianChenXinFilebox',
           eventReduce: true
       })
   }
   
   export const db = createdb();
   

   由于，创建数据库时，数据库名称可以使用文件夹路径来代替，以达到创建数据库到指定位置的目的，所以这里为了方便测试，使用了D:/dbtest/

2.3、配置webpack相关

找到angular.webpack.js文件，在其中填充以下代码：

const path = require("path");

config.externals = {
    "leveldown": "require('leveldown')"
}
config.resolve = {
    ...config.resolve,
    fallback: {
        "stream": false,
        "path": false,
        "assert": false,
        "crypto": false,
        "fs": false,
    }
}

2.4、配置angular.json相关

angular.json中的配置，主要是为消除运行时出现的一些依赖项的警告：

"build": {
	"options": {
        "allowedCommonJsDependencies": [
              "rxjs",
              "rxjs/operators",
              "crypto-js/aes",
              "crypto-js/enc-utf8",
              "@babel/runtime/helpers/asyncToGenerator",
              "@babel/runtime/regenerator",
              "@babel/runtime/helpers/createClass",
              "@babel/runtime/helpers/inheritsLoose",
              "@babel/runtime/helpers/wrapNativeSuper",
              "modifyjs",
              "is-my-json-valid",
              "deep-equal",
              "pouchdb-adapter-leveldb",
              "argsarray",
              "inherits",
              "object-path",
              "fast-deep-equal",
              "p-queue",
              "rimraf",
              "clone",
              "is-electron",
              "detect-node"
        ]
	}
}

原则是出现了那些依赖项的警告，就在此配置即可。

不过因为是警告项而非错误，我们不管也可以。

2.5、使用rxdb

使用rxdb很简单，我们只需要调用一些db的方法，看看是否可以调用成功且在D盘下是否可以创建dbtest目录并产生数据库文件即可，例如：

import { db } from '../database/createdb';

ngOnInit(){
    this.testDb();
}

async testDb() {
    (await db).exportJSON().then(json=>{
      console.log(json);
    })
}

3、错误收集

3.1、error TS2661: Cannot export 'Buffer'

Error: node_modules/@types/node/ts4.8/buffer.d.ts:98:14 - error TS2661: Cannot export ‘Buffer’. Only local declarations can be exported from a module.

export { Buffer };

出现原因：好像是**@types/node** 和 **pouchdb中的 @types/pouchdb-core ** 有一些冲突的锅。所以这里提出两个解决方案：

• 解决方案1：可以在tsconfig.json中添加：

  { "skipLibCheck": true }
  

  跳过声明文件的类型检查 ，来解决编译错误。

• 解决方案2：@type/node降级，经测试@type/node@15及以下能够正常使用：

  npm install @types/node@15 --save-dev
  

3.2、页面加载空白

可以F12查看浏览器控制台，是否有报错信息。

出现原因：因为浏览器中没有node宿主环境，所以会出现一些错误。

解决方案：修改package.json运行命令，目的是让electron运行serve启动命令，但是不要打开web页面，只显示在electron中即可

{
    "scripts":{
        // 将 ng:serve替换为以下命令
      	"ng:serve": "ng serve -c dev"
    }
}