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
的使用不复杂,语法也很简单,若是你了解过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
依赖下载完成后,配置过程如下:
-
在
src/app
目录下新建文件夹database
(这是我的习惯,名字可以随意取) -
在
database
文件下,新建一个createdb.ts
文件 -
在
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"
}
}