RxJS - Thiết lập môi trường

Trong chương này, chúng ta sẽ cài đặt RxJS. Để làm việc với RxJS, chúng ta cần thiết lập sau:

  • NodeJS
  • Npm
  • Cài đặt gói RxJS

Cài đặt NODEJS và NPM

Rất dễ cài đặt RxJS bằng npm. Bạn cần cài đặt nodejs và npm trên hệ thống của mình. Để xác minh xem NodeJS và npm đã được cài đặt trên hệ thống của bạn hay chưa, hãy thử thực hiện lệnh sau trong dấu nhắc lệnh của bạn.

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

Trong trường hợp bạn đang nhận được phiên bản, điều đó có nghĩa là nodejs và npm đã được cài đặt trên hệ thống của bạn và phiên bản 10 và 6 hiện có trên hệ thống.

Nếu nó không in bất cứ thứ gì, hãy cài đặt nodejs trên hệ thống của bạn. Để cài đặt nodejs, hãy truy cập trang chủhttps://nodejs.org/en/download/ của nodejs và cài đặt gói dựa trên hệ điều hành của bạn.

Trang tải xuống của nodejs sẽ giống như sau:

Dựa trên hệ điều hành của bạn, hãy cài đặt gói bắt buộc. Sau khi nodejs được cài đặt, npm cũng sẽ được cài đặt cùng với nó. Để kiểm tra xem npm đã được cài đặt hay chưa, hãy nhập npm –v vào terminal. Nó sẽ hiển thị phiên bản của npm.

Cài đặt gói RxJS

Để bắt đầu cài đặt RxJS, trước tiên hãy tạo một thư mục có tên rxjsproj/ nơi chúng ta sẽ thực hành tất cả các ví dụ RxJS.

Khi thư mục rxjsproj/ được tạo, chạy lệnh npm init, để thiết lập dự án như hình dưới đây

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

Npm initlệnh sẽ hỏi một số câu hỏi trong quá trình thực hiện, chỉ cần nhấn enter và tiếp tục. Sau khi thực thi npm init xong, nó sẽ tạopackage.json bên trong rxjsproj / như hình dưới đây -

rxjsproj/
   package.json

Bây giờ bạn có thể cài đặt rxjs bằng lệnh dưới đây:

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

Chúng tôi đã hoàn tất cài đặt RxJS. Bây giờ chúng ta hãy thử sử dụng RxJS, để tạo một thư mụcsrc/ phía trong rxjsproj/

Vì vậy, bây giờ, chúng ta sẽ có cấu trúc thư mục như hình dưới đây:

rxjsproj/
   node_modules/
   src/
   package.json

Phía trong src/ tạo một tập tin testrx.jsvà viết đoạn mã sau:

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}`));

Khi chúng ta thực thi đoạn mã trên trong dấu nhắc lệnh, sử dụng lệnh - node testrx.js, nó sẽ hiển thị lỗi khi nhập, vì nodejs không biết phải làm gì với việc nhập.

Để nhập hoạt động với nodejs, chúng ta cần cài đặt gói mô-đun ES6 bằng cách sử dụng npm như hình dưới đây:

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

Sau khi gói được cài đặt, bây giờ chúng tôi có thể thực thi testrx.js tệp như hình dưới đây -

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

Chúng ta có thể thấy đầu ra ngay bây giờ, cho thấy RxJS đã được cài đặt và sẵn sàng sử dụng. Phương pháp trên sẽ giúp chúng ta kiểm tra RxJS trong dòng lệnh. Trong trường hợp, bạn muốn kiểm tra RxJS trong trình duyệt, chúng tôi sẽ cần một số gói bổ sung.

Kiểm tra RxJS trong Trình duyệt

Cài đặt các gói sau bên trong thư mục 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

Để khởi động máy chủ thực thi tệp Html của chúng tôi, chúng tôi sẽ sử dụng máy chủ webpack. Lệnh "xuất bản" trong package.json sẽ giúp chúng ta khởi động cũng như đóng gói tất cả các tệp js bằng cách sử dụng webpack. Các tệp js được đóng gói là tệp js cuối cùng của chúng ta sẽ được sử dụng được lưu tại thư mục path / dev .

Để sử dụng webpack, chúng ta cần chạy npm run publish lệnh và lệnh được thêm vào package.json như hình dưới đây:

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"
   }
}

Để làm việc với webpack trước tiên chúng ta phải tạo một tệp có tên là webpack.config.js có chi tiết cấu hình để webpack hoạt động.

Chi tiết trong tệp như sau:

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']
            }
         }
      ]
   }
};

Cấu trúc của tệp như hình trên. Nó bắt đầu với một đường dẫn cung cấp chi tiết đường dẫn hiện tại.

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

Tiếp theo là đối tượng module.exports có mục nhập thuộc tính, đầu ra và mô-đun. Mục nhập là điểm bắt đầu. Ở đây, chúng ta cần cung cấp tệp js bắt đầu mà chúng ta muốn biên dịch.

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

path.resolve (_dirname, 'src / testrx.js') - sẽ tìm kiếm thư mục src trong thư mục và testrx.js trong thư mục đó.

Đầu ra

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

Đầu ra là một đối tượng có đường dẫn và tên tệp chi tiết. Đường dẫn sẽ giữ thư mục chứa tệp đã biên dịch và tên tệp sẽ cho biết tên của tệp cuối cùng sẽ được sử dụng trong tệp .html của bạn.

Mô-đun

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

Modulelà đối tượng với các chi tiết quy tắc có các thuộc tính tức là kiểm tra, bao gồm, trình tải, truy vấn. Kiểm tra sẽ nắm giữ chi tiết của tất cả các tệp js kết thúc bằng .js và .jsx. Nó có mẫu sẽ tìm kiếm .js ở cuối trong điểm vào đã cho.

Include yêu cầu thư mục được sử dụng để xem các tệp.

The loader sử dụng babel-loader để biên dịch mã.

The querycó giá trị đặt trước thuộc tính là một mảng có giá trị '@ babel / preset-env'. Nó sẽ chuyển mã theo môi trường ES bạn cần.

Cấu trúc thư mục cuối cùng sẽ như sau:

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

Chạy lệnh

npm run publishsẽ tạo thư mục dev / với tệp main_bundle.js trong đó. Máy chủ sẽ được khởi động và bạn có thể kiểm tra index.html của mình trong trình duyệt như hình dưới đây.

Mở trình duyệt và nhấn url - http://localhost:8080/

Đầu ra được hiển thị trong bảng điều khiển.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved