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://nodejs.org/en/download/にアクセスし、OSに基づいてパッケージをインストールします。

nodejsのダウンロードページは次のようになります-

NodeJS

OSに基づいて、必要なパッケージをインストールします。 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 [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
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はインポートの処理方法を知らないため、インポートのエラーが表示されます。

nodejsでインポートを機能させるには、以下に示すように、npmを使用してES6モジュールパッケージをインストールする必要があります-

E:\rxjsproj\src>npm install --save-dev esm
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
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 [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]
(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"})

+ [email protected]
+ [email protected]
+ @babel/[email protected]
+ @babel/[email protected]
+ [email protected]
+ [email protected]
added 675 packages from 373 contributors and audited 10225 packages in 255.567s
found 0 vulnerabilities

サーバーを起動してHtmlファイルを実行するには、webpack-serverを使用します。 package.jsonのコマンド「publish」は、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オブジェクトです。エントリーは出発点です。ここでは、コンパイルする開始jsファイルを指定する必要があります。

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

path.resolve（_dirname、 ‘src/testrx.js’）-ディレクトリでsrcフォルダーを探し、そのフォルダーでtestrx.jsを探します。

出力

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

出力は、パスとファイル名の詳細を持つオブジェクトです。pathは、コンパイルされたファイルが保持されるフォルダーを保持し、ファイル名は、lファイルで使用される最終的なファイルの名前を示します。

モジュール

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

モジュール*は、プロパティを持つルール詳細を持つオブジェクトです。テスト、インクルード、ローダー、クエリ。テストは、.jsおよび.jsxで終わるすべてのjsファイルの詳細を保持します。指定されたエントリポイントの最後で.jsを探すパターンがあります。

*Include* は、ファイルの表示に使用するフォルダーを指定します。

ローダー*はコードのコンパイルにbabel-loaderを使用します。

クエリ*には、値 '@ babel/preset-env’の配列であるプロパティプリセットがあります。それはあなたが必要とするES環境に従ってコードをトランスパイルします。

最終的なフォルダ構造は次のようになります-

rxjsproj/
   node_modules/
   src/
      testrx.js
   indexl
   package.json
   webpack.config.js

コマンドを実行

*npm run publish* は、main_bundle.jsファイルを含むdev/フォルダーを作成します。 サーバーが起動し、次のようにブラウザーでindexlをテストできます。

コマンドの実行

ブラウザを開いて、URLにアクセスします- http：//localhost：8080/

メインバンドル

出力はコンソールに表示されます。

Rxjs-environment-setup

目次