How to reference Rxjs in WeChat applet

After getting used to Rxjs, I want to use it in the project when developing WeChat applets recently. However, due to some problems, it is not as simple as an ordinary front-end project when the WeChat applet refers to a third-party package. After a lot of learning, the WeChat applet under the ts version has successfully introduced the Rxjs package, which is summarized as follows:

Build package.json

The WeChat applet has a package.json in the root list, but this package.json can only add one development dependency, that is, devDependencies . And production dependencies, such as the current need to use Rxjs in the code, cannot be added in package.json.

If you need to install dependencies in production, you need src folder (copy one is OK) package.json , for example, we enter the src folder, execute npm init , and you will get the following 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"
}

With this file, you can install some third-party dependencies.

wx-rxjs

For unknown reasons, Rxjs has no way to build it successfully through the official WeChat build tool. Here we introduce the third-party wx-rxjs , its core code is as follows (you can ignore it completely):

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

The function of the above core code is to re-export, thus avoiding the problem that some operators cannot be correctly constructed by WeChat applets. So if the current RXJS version does not meet your requirements, you can fork the repository above, revise the rxjs version and re-release one.

The main operation is to src directory 0611a8489ac914:

npm install --save wx-rxjs

npm build

According to the official find the WeChat developer tools, click in turn: Tools-"npm build, then the build process is completed.

Next, you can use Rxjs more happily.

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));