如何搭建纯RxJs项目？无需Angular/React等框架的实现方法

嘿，很高兴看到你已经在Angular项目里玩转RxJS了！想脱离框架搭建纯RxJS项目其实非常简单直接，我给你一步步拆解：

1. 初始化基础项目 #

先创建一个空文件夹，打开终端进入后初始化npm项目：

mkdir pure-rxjs-demo && cd pure-rxjs-demo
npm init -y

npm init -y会自动生成默认的package.json，省得你手动填一堆配置信息。

2. 安装RxJS核心依赖 #

你只需要安装官方的rxjs包就够了——这是RxJS的核心库，完全独立于任何前端框架：

npm install rxjs

3. 写第一个纯RxJS代码示例 #

创建一个index.js文件，写个最简单的Observable示例试试水：

import { Observable } from 'rxjs';

// 创建一个输出文本的Observable
const myObservable = new Observable(subscriber => {
  subscriber.next('Hello');
  subscriber.next('RxJS');
  setTimeout(() => {
    subscriber.next('World!');
    subscriber.complete();
  }, 1000);
});

// 订阅这个Observable，获取输出
console.log('开始订阅');
myObservable.subscribe({
  next: value => console.log(value),
  complete: () => console.log('订阅完成')
});

4. 运行你的代码 #

因为用了ES模块的import语法，要先在package.json里加一行配置："type": "module"，这样Node.js就能识别ES模块了。

然后直接运行：

node index.js

你会看到控制台依次输出内容，一秒后还会显示订阅完成的提示，完美！

可选：用TypeScript开发 #

如果你习惯用TypeScript，只需要额外装几个开发依赖：

npm install typescript @types/rxjs ts-node --save-dev

接着用tsc --init生成默认的tsconfig.json，然后写个index.ts文件：

import { Observable } from 'rxjs';

// 给Observable指定类型，更严谨
const myObservable: Observable<string> = new Observable(subscriber => {
  subscriber.next('Hello TypeScript + RxJS');
  subscriber.complete();
});

myObservable.subscribe(value => console.log(value));

运行的话用：

npx ts-node index.ts

这样就完全脱离了Angular、React这些框架，一个纯纯的RxJS项目就搭好了！你可以基于这个基础，拓展任何你想用RxJS实现的逻辑——比如处理DOM事件流、组合异步操作、状态管理等等。

内容的提问来源于stack exchange，提问作者user4661780