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/ 並根據您的作業系統安裝相應的包。

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

輸出顯示在控制檯中。

列印頁面
上一頁
下一頁
廣告