RxJS 安装或环境设置

有多种方式安装 RxJS，但在安装 RxJS 之前，我们需要以下设置才能高效地使用 RxJS。

您需要安装 -

• js
• Npm
• RxJS 包安装

安装 Node.js 和 npm

如果您已经熟悉 Node.js，那么您一定已经在您的计算机系统上安装了 Node.js。 您应该检查您的系统上是否已经安装了 Node.js。 如果您尚未安装 Node.js，则使用 npm 安装 RxJS 非常容易。

首先，让我们验证您的系统上是否安装了 Node.js 和 npm。 打开您的 Node.js 命令提示符并执行以下命令。

运行以下命令来检查 Node 的版本

运行以下命令来检查 npm 版本

运行上述命令后，您可以看到我们得到了结果。 这意味着 Node.js 和 npm 已安装在我们的系统上，版本分别为 12.16.3 和 6.14.4。 所以，我们可以继续进行下一步。

如果您的命令提示符未打印任何内容，则表示您的系统上未安装 Node.js 和 npm

如何安装 Node.js？

安装 Node.js 并非难事。 要安装 Node.js，首先转到 Node.js 官方网站的下载页面 https://node.org.cn/en/download/，然后根据您的操作系统安装该软件包。

您将看到 Node.js 的下载页面看起来像这样

根据您的操作系统安装所需的软件包。 安装 Node.js 后，npm 也将随之安装。 现在，在终端中键入 npm -v 命令来检查是否安装了 npm，您将看到 npm 的版本。

您可以阅读详细信息：如何安装 Node.js？ install-nodejs

安装 RxJS 包

在开始 RxJS 安装之前，我们首先要创建一个名为“rxjsproject”的文件夹，我们将在其中练习所有 RxJS 示例。

创建文件夹 rxjsproject 后，我们必须运行命令 npm init 来设置项目。

执行以下给定的命令

当您运行 npm init 命令时，它将在执行期间询问几个问题。 您只需按 Enter 并继续即可。

npm init 的执行完成后，它将在 rxjsproject/ 内部创建一个文件 package.json，如下所示

文件 package.json 包含以下代码

安装 RxJS

现在，所有先决条件都已完成，现在是安装 RxJS 的时候了。 使用以下命令来安装 RxJS

运行安装代码后，您将看到 npm 创建了一个锁定文件，即 package-lock.json。 您应该提交此文件。

在上图中，您可以看到 RxJS 的安装已完成。

现在，让我们看看如何使用 RxJS。

首先，在 rxjsproject/ 内部创建一个文件夹 src/。 请参见下图

现在，您将看到文件夹结构如下所示

现在，在 src/ 文件夹 中创建一个文件 testrx.js 并编写以下代码

如果您使用命令 node testrx.js 在命令提示符中执行上述代码，则会显示导入错误。 发生此错误的原因是 Node.js 不知道如何处理导入。

要解决此问题，我们必须使其能够使用 Node.js 导入。

安装 ES6 模块包

为此，我们必须使用 npm 安装 ES6 模块包。 使用以下命令来安装 ES6 模块包。

现在，该软件包已安装，您可以使用以下命令执行 testrx.js 文件

输出

Output is: 1
Output is: 4
Output is: 9
Output is: 16
Output is: 25

请参见下图

在上图中，您可以在控制台上看到输出。 您可以看到 RxJS 已安装并可以使用，但是上述方法将帮助我们仅在命令行中测试 RxJS。 如果您想在浏览器中测试 RxJS，则必须安装一些其他软件包。

在浏览器中测试 RxJS

我们必须在 rxjsproj/ 文件夹中安装以下软件包才能在浏览器中测试 RxJS。

运行以下 npm 命令

在这里，我们已经安装了 webpack-server 来启动服务器并执行我们的 Html 文件。 package.json 中的命令“publish”用于启动以及使用 webpack 服务器打包所有 js 文件。

要使用 webpack，我们必须运行 npm run publish 命令。 您可以看到发布命令已添加到 package.json 中，如下所示

使用以下代码更新 package.json 文件

Package.json

为了与 webpack 合作，创建一个名为 webpack.config.js 的文件，其中包含以下代码

现在，在根项目中创建一个 index.html 文件。 该文件将包含您想要在浏览器上显示的内容。

Index.html

最终的文件夹结构将如下所示

运行项目

现在，执行运行命令 npm run publish。 它将创建一个名为 dev 的文件夹，其中包含 main_bundle.js 文件。 服务器将启动，您可以测试浏览器中的 index.html。

打开浏览器并转到本地主机 url：https://:8080/，您将看到输出