习惯了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));