RxJS - Ortam Kurulumu

Bu bölümde, RxJS'yi kuracağız. RxJS ile çalışmak için aşağıdaki kuruluma ihtiyacımız var -

NodeJS
Npm
RxJS paketi kurulumu

NODEJS ve NPM Kurulumu

RxJS'yi npm kullanarak kurmak çok kolaydır. Sisteminizde nodejs ve npm'nin kurulu olması gerekir. Sisteminizde NodeJS ve npm'nin kurulu olup olmadığını doğrulamak için, komut isteminizde aşağıdaki komutu çalıştırmayı deneyin.

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

Sürümü alıyorsanız, bu, sisteminize nodejs ve npm'nin kurulu olduğu ve sürümün şu anda sistemde 10 ve 6 olduğu anlamına gelir.

Herhangi bir şey yazdırmazsa, sisteminize nodejs yükleyin. Nodejs yüklemek için ana sayfaya gidinhttps://nodejs.org/en/download/ nodejs ve işletim sisteminize göre paketi yükleyin.

Nodejs indirme sayfası aşağıdaki gibi görünecektir -

İşletim sisteminize bağlı olarak gerekli paketi kurun. Nodejs kurulduktan sonra, npm de onunla birlikte yüklenecektir. Npm'nin kurulu olup olmadığını kontrol etmek için terminale npm –v yazın. Npm'nin sürümünü görüntülemelidir.

RxJS Paket Kurulumu

RxJS kurulumuyla başlamak için önce adında bir klasör oluşturun rxjsproj/ burada tüm RxJS örneklerini uygulayacağız.

Klasör rxjsproj/ oluşturulur, komutu çalıştır npm init, aşağıda gösterildiği gibi proje kurulumu için

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

Npm initkomutu yürütme sırasında birkaç soru soracaktır, sadece enter tuşuna basın ve devam edin. Npm init'in yürütülmesi tamamlandığında,package.json rxjsproj içinde / aşağıda gösterildiği gibi -

rxjsproj/
   package.json

Şimdi aşağıdaki komutu kullanarak rxj'leri kurabilirsiniz -

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 kurulumu ile işimiz bitti. Şimdi bir klasör oluşturmak için RxJS kullanmayı deneyelimsrc/ içeride rxjsproj/

Şimdi, aşağıda gösterildiği gibi klasör yapısına sahip olacağız -

rxjsproj/
   node_modules/
   src/
   package.json

İçeride src/ bir dosya oluştur testrx.jsve aşağıdaki kodu yazın -

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

Yukarıdaki kodu komut isteminde komut kullanarak çalıştırmaya gittiğimizde - node testrx.js, nodejs içe aktarmayla ne yapacağını bilmediğinden, içe aktarma için hata görüntüler.

İçe aktarmanın nodejs ile çalışması için, aşağıda gösterildiği gibi npm kullanarak ES6 modülleri paketini yüklememiz gerekir -

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

Paket kurulduktan sonra şimdi çalıştırabiliriz testrx.js dosya aşağıda gösterildiği gibi -

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

RxJS'nin kurulu ve kullanıma hazır olduğunu gösteren çıktıyı şimdi görebiliriz. Yukarıdaki yöntem, komut satırında RxJS'yi test etmemize yardımcı olacaktır. Tarayıcıda RxJS'yi test etmek isterseniz, bazı ek paketlere ihtiyacımız olacaktır.

Tarayıcıda RxJS'yi Test Etme

Aşağıdaki paketleri rxjsproj / klasörüne yükleyin -

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 dosyamızı yürütmek üzere sunucuyu başlatmak için webpack-server kullanacağız. Package.json'daki "yayınla" komutu, başlamamıza ve tüm js dosyalarını webpack kullanarak paketlememize yardımcı olacaktır. Kullanılacak son js dosyamız olan paketlenmiş js dosyaları / dev klasörüne kaydedilir.

Web paketini kullanmak için çalıştırmamız gerekiyor npm run publish komut ve komut, package.json içine aşağıda gösterildiği gibi eklenir -

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

Web paketiyle çalışmak için, önce web paketinin çalışması için yapılandırma ayrıntılarını içeren webpack.config.js adlı bir dosya oluşturmalıyız.

Dosyadaki detaylar aşağıdaki gibidir -

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

Dosyanın yapısı yukarıda gösterildiği gibidir. Geçerli yol ayrıntılarını veren bir yolla başlar.

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

Sırada input, output ve module özelliklerine sahip olan module.exports nesnesidir. Giriş, başlangıç noktasıdır. Burada derlemek istediğimiz başlangıç js dosyasını vermemiz gerekiyor.

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

path.resolve (_dirname, 'src / testrx.js') - dizinde src klasörünü ve bu klasörde testrx.js'yi arayacaktır.

Çıktı

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

Çıktı, yol ve dosya adı ile bir nesnedir. Details.path, derlenen dosyanın tutulacağı klasörü tutacaktır ve dosya adı, .html dosyanızda kullanılacak son dosyanın adını söyleyecektir.

Modül

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

Moduletest, dahil etme, yükleyici, sorgu gibi özelliklere sahip kural ayrıntılarına sahip nesnedir. Test, .js ve .jsx ile biten tüm js dosyalarının ayrıntılarını tutacaktır. Verilen giriş noktasının sonunda .js'yi arayacak desene sahiptir.

Include dosyalara bakmak için kullanılacak klasörü söyler.

The loader kod derlemek için babel yükleyici kullanır.

The query'@ babel / preset-env' değerine sahip bir dizi olan özellik ön ayarlarına sahiptir. İhtiyacınız olan ES ortamına göre kodu aktaracaktır.

Son klasör yapısı aşağıdaki gibi olacaktır -

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

Komutu Çalıştır

npm run publishiçinde main_bundle.js dosyasıyla dev / klasör oluşturacaktır. Sunucu başlatılacak ve index.html dosyanızı aşağıda gösterildiği gibi tarayıcıda test edebilirsiniz.

Tarayıcıyı açın ve url'yi tıklayın - http://localhost:8080/

Çıktı konsolda gösterilir.