RxJS - Configuración del entorno

En este capítulo, instalaremos RxJS. Para trabajar con RxJS, necesitamos la siguiente configuración:

NodeJS
Npm
Instalación del paquete RxJS

Instalación de NODEJS y NPM

Es muy fácil instalar RxJS usando npm. Necesita tener nodejs y npm instalados en su sistema. Para verificar si NodeJS y npm están instalados en su sistema, intente ejecutar el siguiente comando en su símbolo del sistema.

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

En caso de que obtenga la versión, significa que nodejs y npm están instalados en su sistema y la versión es 10 y 6 ahora mismo en el sistema.

Si no imprime nada, instale nodejs en su sistema. Para instalar nodejs, vaya a la página de iniciohttps://nodejs.org/en/download/ de nodejs e instale el paquete según su sistema operativo.

La página de descarga de nodejs se verá así:

Según su sistema operativo, instale el paquete requerido. Una vez que nodejs esté instalado, npm también se instalará junto con él. Para comprobar si npm está instalado o no, escriba npm –v en la terminal. Debería mostrar la versión de npm.

Instalación del paquete RxJS

Para comenzar con la instalación de RxJS, primero cree una carpeta llamada rxjsproj/ donde practicaremos todos los ejemplos de RxJS.

Una vez que la carpeta rxjsproj/ se crea, ejecutar comando npm init, para la configuración del proyecto como se muestra a continuación

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

Npm initEl comando hará algunas preguntas durante la ejecución, solo presione enter y continúe. Una vez que se realiza la ejecución de npm init, crearápackage.json dentro de rxjsproj / como se muestra a continuación -

rxjsproj/
   package.json

Ahora puede instalar rxjs usando el siguiente comando:

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

Hemos terminado con la instalación de RxJS. Intentemos ahora usar RxJS, para eso cree una carpetasrc/ dentro rxjsproj/

Entonces, ahora, tendremos la estructura de carpetas como se muestra a continuación:

rxjsproj/
   node_modules/
   src/
   package.json

Dentro src/ crear un archivo testrx.jsy escribe el siguiente código:

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

Cuando vamos a ejecutar el código anterior en el símbolo del sistema, usando el comando - node testrx.js, mostrará un error para la importación, ya que nodejs no sabe qué hacer con la importación.

Para que la importación funcione con nodejs, necesitamos instalar el paquete de módulos ES6 usando npm como se muestra a continuación:

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 vez que el paquete está instalado, ahora podemos ejecutar testrx.js archivo como se muestra a continuación -

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

Podemos ver el resultado ahora, que muestra que RxJS está instalado y listo para usar. El método anterior nos ayudará a probar RxJS en la línea de comandos. En caso de que desee probar RxJS en el navegador, necesitaríamos algunos paquetes adicionales.

Prueba de RxJS en el navegador

Instale los siguientes paquetes dentro de la carpeta 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

Para iniciar el servidor para ejecutar nuestro archivo Html, usaremos webpack-server. El comando "publicar" en package.json nos ayudará a iniciar y empaquetar todos los archivos js usando webpack. Los archivos js empaquetados que son nuestro archivo js final que se utilizará se guardan en la carpeta ruta / dev .

Para usar el paquete web, necesitamos ejecutar npm run publish comando y el comando se agrega en package.json como se muestra a continuación:

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

Para trabajar con webpack, primero debemos crear un archivo llamado webpack.config.js que tiene los detalles de configuración para que webpack funcione.

Los detalles en el archivo son los siguientes:

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 estructura del archivo es como se muestra arriba. Comienza con una ruta que proporciona los detalles de la ruta actual.

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

El siguiente es el objeto module.exports que tiene propiedades de entrada, salida y módulo. La entrada es el punto de partida. Aquí, necesitamos dar el archivo js de inicio que queremos compilar.

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

path.resolve (_dirname, 'src / testrx.js') - buscará la carpeta src en el directorio y testrx.js en esa carpeta.

Salida

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

La salida es un objeto con detalles de ruta y nombre de archivo. La ruta contendrá la carpeta en la que se guardará el archivo compilado y el nombre de archivo indicará el nombre del archivo final que se utilizará en su archivo .html.

Módulo

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

Modulees un objeto con detalles de reglas que tiene propiedades, es decir, prueba, inclusión, cargador, consulta. La prueba contendrá detalles de todos los archivos js que terminan en .js y .jsx. Tiene el patrón que buscará .js al final del punto de entrada dado.

Include indica la carpeta que se utilizará para buscar los archivos.

The loader usa babel-loader para compilar código.

The querytiene propiedades preestablecidas que es una matriz con el valor '@ babel / preset-env'. Transpilará el código según el entorno ES que necesite.

La estructura de carpetas final será la siguiente:

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

Ejecutar comando

npm run publishcreará la carpeta dev / con el archivo main_bundle.js. El servidor se iniciará y podrá probar su index.html en el navegador como se muestra a continuación.

Abra el navegador y presione la URL - http://localhost:8080/

La salida se muestra en la consola.