如何在微信小程序中引用Rxjs

Posted 2021-09-03 myskies

习惯了Rxjs以后，最近在开发微信小程序时也想在项目中应用它。但由于某些问题，微信小程序引用第三方包时，并不像普通的前台项目那么简单。经过一翻学习，实现了ts版本下的微信小程序成功引入Rxjs包，总结如下：

建立package.json

微信小程序在根目中有个package.json，但这个package.json只能添加一个开发依赖，即devDependencies。而生产的依赖，比如我们当前需要在代码中使用Rxjs，则是不能够通过在package.json中添加的。

生产中需要安装依赖的话，需要在src文件夹下建立（复制一个过来也行）package.json，比如我们进入src文件夹，执行npm init，一通回车以后便会得到一个如下的package.json

  "name": "root",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "directories": {
    "example": "example"
  },
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

有了此文件，便可以安装一些第三方依赖了。

wx-rxjs

由于未知的原因，Rxjs没有办法通过微信官方的构建工具构建成功的。在这里我们引入第三方的wx-rxjs，它的核心代码如下(你可以完全忽略它)：

export { Operators };
export * from \'rxjs\';

上述核心代码的作用就是重新进行exports，从而避免了一些操作符无法正确被微信小程序构建的问题。所以如果当前的 RXJS 版本不符合你的要求的话，则可以fork上面的仓库，修正rxjs版本后重新发布一个。

而最主要的操作是来到src目录下执行：

npm install --save wx-rxjs

npm 构建

按官方文档找到微信开发者工具，依次点击：工具-》npm 构建，便完成了构建过程。

接下来更可以愉快地使用Rxjs了。

import { of, Observable, Operators } from \'wx-rxjs\';

const o: Observable<number> = of(1, 2, 3);

o.pipe(
  Operators.map((x) => x + 1)
).subscribe((x) => console.log(x));

引入 JS

在些 JS 文件由于并没有类型，所以在TS 项目中无法引入，此时可以在tsconfig.json中加入以下选项：

{
  "compilerOptions": {
    /**关闭在引入一些声明为any的类型时的报错检查*/
    "noImplicitAny": false,