RxJS - Configurazione dell'ambiente

In questo capitolo, installeremo RxJS. Per lavorare con RxJS, abbiamo bisogno della seguente configurazione:

NodeJS
Npm
Installazione del pacchetto RxJS

Installazione di NODEJS e NPM

È molto facile installare RxJS usando npm. Devi avere nodejs e npm installati sul tuo sistema. Per verificare se NodeJS e npm sono installati sul tuo sistema, prova ad eseguire il seguente comando nel tuo prompt dei comandi.

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

Se stai ottenendo la versione, significa che nodejs e npm sono installati sul tuo sistema e la versione è 10 e 6 in questo momento sul sistema.

Se non stampa nulla, installa nodejs sul tuo sistema. Per installare nodejs, vai alla home pagehttps://nodejs.org/en/download/ di nodejs e installa il pacchetto in base al tuo sistema operativo.

La pagina di download di nodejs sarà simile alla seguente:

In base al tuo sistema operativo, installa il pacchetto richiesto. Una volta installato nodejs, verrà installato anche npm. Per verificare se npm è installato o meno, digitare npm –v nel terminale. Dovrebbe visualizzare la versione di npm.

Installazione del pacchetto RxJS

Per iniziare con l'installazione di RxJS, creare prima una cartella chiamata rxjsproj/ dove praticheremo tutti gli esempi RxJS.

Una volta che la cartella rxjsproj/ viene creato, eseguire il comando npm init, per l'impostazione del progetto come mostrato di seguito

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

Npm initil comando farà alcune domande durante l'esecuzione, basta premere invio e procedere. Una volta completata l'esecuzione di npm init, verrà creatopackage.json all'interno di rxjsproj / come mostrato di seguito -

rxjsproj/
   package.json

Ora puoi installare rxjs usando il comando seguente:

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

Abbiamo finito con l'installazione di RxJS. Proviamo ora a usare RxJS, per questo creiamo una cartellasrc/ dentro rxjsproj/

Quindi, ora, avremo la struttura delle cartelle come mostrato di seguito -

rxjsproj/
   node_modules/
   src/
   package.json

Dentro src/ crea un file testrx.jse scrivi il codice seguente:

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

Quando andiamo a eseguire il codice sopra nel prompt dei comandi, usando il comando - node testrx.js, verrà visualizzato un errore per l'importazione, poiché nodejs non sa cosa fare con l'importazione.

Per far funzionare l'importazione con nodejs, dobbiamo installare il pacchetto dei moduli ES6 utilizzando npm come mostrato di seguito -

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

Una volta installato il pacchetto, ora possiamo eseguire testrx.js file come mostrato di seguito -

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

Ora possiamo vedere l'output, che mostra che RxJS è installato e pronto per l'uso. Il metodo sopra ci aiuterà a testare RxJS nella riga di comando. Nel caso volessi testare RxJS nel browser, avremmo bisogno di alcuni pacchetti aggiuntivi.

Test di RxJS nel browser

Installa i seguenti pacchetti all'interno della cartella 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 [email protected]
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

Per avviare il server per eseguire il nostro file Html, useremo webpack-server. Il comando "publish" in package.json ci aiuterà ad avviare e impacchettare tutti i file js usando webpack. I file js compressi che sono il nostro file js finale da utilizzare vengono salvati nella cartella path / dev .

Per usare webpack, dobbiamo eseguire npm run publish comando e il comando viene aggiunto in package.json come mostrato di seguito -

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

Per lavorare con webpack dobbiamo prima creare un file chiamato webpack.config.js che abbia i dettagli di configurazione per il funzionamento di webpack.

I dettagli nel file sono i seguenti:

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

La struttura del file è come mostrato sopra. Inizia con un percorso che fornisce i dettagli del percorso corrente.

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

Il prossimo è module.exports oggetto che ha proprietà entry, output e module. L'ingresso è il punto di partenza. Qui, dobbiamo fornire il file js di avvio che vogliamo compilare.

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

path.resolve (_dirname, 'src / testrx.js') - cercherà la cartella src nella directory e testrx.js in quella cartella.

Produzione

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

L'output è un oggetto con percorso e nome file details.path conterrà la cartella in cui verrà conservato il file compilato e il nome file indicherà il nome del file finale da utilizzare nel file .html.

Modulo

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

Moduleè un oggetto con i dettagli delle regole che ha proprietà cioè test, include, loader, query. Il test conterrà i dettagli di tutti i file js che terminano con .js e .jsx. Ha il modello che cercherà .js alla fine nel punto di ingresso fornito.

Include indica la cartella da utilizzare per guardare i file.

The loader usa babel-loader per compilare il codice.

The queryha proprietà predefinite che è un array con valore '@ babel / preset-env'. Transpile il codice secondo l'ambiente ES di cui hai bisogno.

La struttura finale delle cartelle sarà la seguente:

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

Esegui comando

npm run publishcreerà la cartella dev / con il file main_bundle.js al suo interno. Il server verrà avviato e potrai testare il tuo index.html nel browser come mostrato di seguito.

Apri il browser e premi l'URL - http://localhost:8080/

L'output viene visualizzato nella console.

↰ Previous page Next page ↱