RxJS - 环境搭建

上一页
下一页

本章我们将安装 RxJS。要使用 RxJS，我们需要以下设置：

  • NodeJS
  • Npm
  • RxJS 包安装

NODEJS 和 NPM 安装

使用 npm 安装 RxJS 非常简单。您的系统上需要安装 nodejs 和 npm。要验证系统上是否安装了 NodeJS 和 npm，请尝试在命令提示符中执行以下命令。

E:\>node -v && npm -v
v10.15.1
6.4.1

如果您看到版本号，则表示您的系统上已安装 nodejs 和 npm，目前系统上的版本分别为 10 和 6。

如果没有任何输出，请在您的系统上安装 nodejs。要安装 nodejs，请访问 nodejs 的主页 https://node.org.cn/en/download/ 并根据您的操作系统安装相应的包。

nodejs 的下载页面如下所示：

NodeJS

根据您的操作系统安装所需的包。安装 nodejs 后，npm 也会随之安装。要检查 npm 是否已安装，请在终端中输入 npm –v。它应该显示 npm 的版本。

RxJS 包安装

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

创建 rxjsproj/ 文件夹后，运行命令 npm init，进行项目设置，如下所示

E:\>mkdir rxjsproj
E:\>cd rxjsproj
E:\rxjsproj>npm init

Npm init 命令在执行过程中会提出一些问题，只需按 Enter 键继续即可。npm init 执行完成后，它将在 rxjsproj/ 内创建 package.json 文件，如下所示：

rxjsproj/
   package.json

现在您可以使用以下命令安装 rxjs：

npm install ---save-dev rxjs


E:\rxjsproj>npm install --save-dev rxjs
npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN rxjsproj@1.0.0 No description
npm WARN rxjsproj@1.0.0 No repository field.

+ rxjs@6.5.3
added 2 packages from 7 contributors and audited 2 packages in 21.89s
found 0 vulnerabilities

我们完成了 RxJS 的安装。现在让我们尝试使用 RxJS，为此在 rxjsproj/ 内创建一个文件夹 src/

因此，现在我们的文件夹结构如下所示：

rxjsproj/
   node_modules/
   src/
   package.json

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

testrx.js

import { of } from 'rxjs;
import { map } from 'rxjs/operators';

map(x => x * x)(of(1, 2, 3)).subscribe((v) => console.log(`Output is: ${v}`));

当我们在命令提示符中使用命令 node testrx.js 执行上述代码时，它将显示导入错误，因为 nodejs 不知道如何处理 import。

要使 import 在 nodejs 中工作，我们需要使用 npm 安装 ES6 模块包，如下所示：

E:\rxjsproj\src>npm install --save-dev esm
npm WARN rxjsproj@1.0.0 No description
npm WARN rxjsproj@1.0.0 No repository field.

+ esm@3.2.25
added 1 package from 1 contributor and audited 3 packages in 9.32s
found 0 vulnerabilities

安装包后，我们现在可以执行 testrx.js 文件，如下所示：

E:\rxjsproj\src>node -r esm testrx.js
Output is: 1
Output is: 4
Output is: 9

现在我们可以看到输出，它显示 RxJS 已安装并可以使用。上述方法将帮助我们在命令行中测试 RxJS。如果您想在浏览器中测试 RxJS，则需要一些额外的包。

在浏览器中测试 RxJS

在 rxjsproj/ 文件夹内安装以下包：

npm install --save-dev babel-loader @babel/core @babel/preset-env webpack webpack-cli webpack-dev-server


E:\rxjsproj>npm install --save-dev babel-loader 
@babel/core @babel/preset-env webpack webpack-cli webpack-dev-server

npm WARN rxjsproj@1.0.0 No description
npm WARN rxjsproj@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9
(node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack-dev-server@3.8.0
+ babel-loader@8.0.6
+ @babel/preset-env@7.6.0
+ @babel/core@7.6.0
+ webpack-cli@3.3.8
+ webpack@4.39.3
added 675 packages from 373 contributors and audited 10225 packages in 255.567s
found 0 vulnerabilities

为了启动服务器来执行我们的 Html 文件，我们将使用 webpack-server。“publish”命令在 package.json 中将帮助我们启动并使用 webpack 打包所有 js 文件。打包后的 js 文件（即最终使用的 js 文件）保存在路径 _/dev_ 文件夹中。

要使用 webpack，我们需要运行 npm run publish 命令，此命令已添加到 package.json 中，如下所示：

Package.json

{
   "name": "rxjsproj",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "publish":"webpack && webpack-dev-server --output-public=/dev/",
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
      "@babel/core": "^7.6.0",
      "@babel/preset-env": "^7.6.0",
      "babel-loader": "^8.0.6",
      "esm": "^3.2.25",
      "rxjs": "^6.5.3",
      "webpack": "^4.39.3",
      "webpack-cli": "^3.3.8",
      "webpack-dev-server": "^3.8.0"
   }
}

要使用 webpack，我们必须首先创建一个名为 webpack.config.js 的文件，其中包含 webpack 工作的配置详细信息。

文件中的详细信息如下：

var path = require('path');

module.exports = {
   entry: {
      app: './src/testrx.js'
   },
   output: {
      path: path.resolve(__dirname, 'dev'),
      filename: 'main_bundle.js'
   },
   mode:'development',
   module: {
      rules: [
         {
            test:/\.(js)$/,
            include: path.resolve(__dirname, 'src'),
            loader: 'babel-loader',
            query: {
               presets: ['@babel/preset-env']
            }
         }
      ]
   }
};

文件的结构如上所示。它以一个路径开头，提供当前路径的详细信息。

var path = require('path'); //gives the current path

接下来是 module.exports 对象，它具有 entry、output 和 module 属性。Entry 是起点。在这里，我们需要提供要编译的起始 js 文件。

entry: {
   app: './src/testrx.js'
},

path.resolve(_dirname, ‘src/testrx.js’) -- 将在目录中查找 src 文件夹，并在该文件夹中查找 testrx.js。

Output (输出)

output: {
   path: path.resolve(__dirname, 'dev'),
   filename: 'main_bundle.js'
},

output 是一个包含路径和文件名详细信息的对象。path 将保存编译后的文件所在的文件夹，而 filename 将指示在 .html 文件中使用的最终文件名。

Module (模块)

module: {
   rules: [
      {
         test:/\.(js)$/,
         include: path.resolve(__dirname, 'src'),
         loader: 'babel-loader',
         query: {
            presets: ['@babel/preset-env']
         }
      }
   ]
}

Module 是一个包含 rules 详细信息的对象，它具有 test、include、loader、query 属性。test 将保存所有以 .js 和 .jsx 结尾的 js 文件的详细信息。它具有一个模式，该模式将在给定的入口点中查找 .js 结尾。

Include 指明要用于查找文件的文件夹。

Loader 使用 babel-loader 来编译代码。

Query 具有 presets 属性，它是一个值为 “@babel/preset-env” 的数组。它将根据您需要的 ES 环境来转换代码。

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

rxjsproj/
   node_modules/
   src/
      testrx.js
   index.html
   package.json
   webpack.config.js

运行命令

npm run publish 将在其中创建包含 main_bundle.js 文件的 dev/ 文件夹。服务器将启动，您可以像下面这样在浏览器中测试您的 index.html。

Run Command

打开浏览器并访问网址： https://:8080/

Main Bundle

输出显示在控制台中。

打印页面
上一页
下一页
广告
© . All rights reserved.