在electron的render线程中使用rxjs

Posted on Edited on In

背景

试用electron时,在renderer层面,手动完成了变量绑定.
而后希望让变量变起来,就准备用rxjs,结果报错了.

方案

在普通的html+js结构下,使用rxjs依然是可能的.
这一点在tampermonkey上已经体现了.

  1. 使用一个cdn加载对应脚本
  2. 在自己的脚本中引用

使用cdn

npm官方就有参考,可以使用 https://unpkg.com/rxjs@^7/dist/bundles/rxjs.umd.min.js

安全策略

在用到渲染脚本的html页面上,
可能还需要定义安全策略

1
2
3
4
5
6
7
8
9
10
11
<!-- 原先 -->
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self'"
  />

<!-- 修改后 -->
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self' https://cdn.jsdelivr.net/npm/[email protected]/dist/bundles/rxjs.umd.min.js"
  />

否则可能被拒绝加载

在其他文件中使用rxjs

比如渲染使用的是 renderer.js

1
<script src="./dist/renderer.js"></script>

可以在 renderer.ts 中像npm描述的那样来写

1
2
3
4
5
6
const {timer} = rxjs;
const {take}=rxjs.operators;

timer(0, 500)
  .pipe(take(20))
  .subscribe((i: number) => (...));

编辑器可能对这种写法非常反感

参考

  1. npm官方就有参考
  2. 口碑不错的jsDelivr
  3. jsDelivr下的rxjs