Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de RxJS 6 para desarrolladores angulares por ejemplo

 En este tutorial de RxJS 6 para desarrolladores de Angular , aprenderá sobre la última versión de RxJS, una biblioteca que implementa la programación reactiva en JavaScript. Aprenderá sobre los conceptos básicos de RxJS 6, como Observables, Observers, Subjects, Streams, Subscriptions y Operators.

En este tutorial, configuraremos un entorno de desarrollo para trabajar con la biblioteca RxJS 6. En el siguiente tutorial, veremos cómo usar RxJS Observables.

Instalación de la biblioteca RxJS 6

Antes de que pueda usar RxJS 6 en su proyecto, debe instalarlo en su proyecto. Si está utilizando marcos como el último Angular 6 , ya tendrá RxJS 6 instalado e integrado. De lo contrario, puede seguir estos pasos para agregar correctamente RxJS a su proyecto.

Primero, configuremos rápidamente un proyecto de TypeScript con Webpack.

Abra su terminal y cree una carpeta para su proyecto:

$ mkdir rxjs6-demo

Navegue dentro de la carpeta creada y cree un package.jsonarchivo con el siguiente contenido:

{
  "name": "rxjs6demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {},
  "scripts": {}
}

A continuación, instale las siguientes dependencias usando npm:

npm install --save rxjs webpack webpack-cli webpack-dev-server typescript ts-loader

Agregue un script de inicio que inicia el servidor de desarrollo de paquetes web en modo de desarrollo :

  "scripts": {
    "start": "webpack-dev-server --mode development"
  },

Configuración de Webpack

Dentro de la carpeta raíz de su proyecto, cree un webpack.config.jsarchivo con el siguiente contenido:

const path = require('path');

module.exports = {
  entry: './src/main.ts',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.ts', '.js', '.tsx' ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Definimos el punto de entrada para nuestro proyecto, ./src/main.tsasí que aquí es donde agregaremos nuestro código TypeScript. Webpack producirá un bundle.jsarchivo dentro de una carpeta dist que se incluirá en nuestro index.htmlarchivo.

Agregar un tsconfig.jsonarchivo de configuración de TypeScript

Dentro de la carpeta raíz de su proyecto agregue un tsconfig.jsonarchivo con el siguiente contenido:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es6",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Esta configuración le permite usar es2017 (es8) y compilar en es6 .

Agregar un index.htmlarchivo

Cree un index.htmlarchivo con el siguiente contenido:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RxJS 6 Tutorial and Examples</title>
</head>
<body>
    <div id="main"></div>
    <script src="./bundle.js"></script>
</body>
</html>

Ahora cree una srccarpeta con un main.tsarchivo y ejecute el siguiente comando para iniciar el servidor de desarrollo webpack:

$ npm start

Puede utilizar su navegador web desde http://localhost:8080/para ver su página.

Conclusión

En este tutorial, hemos instalado un entorno de desarrollo con TypeScript para comenzar a usar la biblioteca RxJS 6.

En este tutorial, hemos visto cómo podemos configurar un proyecto de desarrollo para que funcione con RxJS 6 y TypeScript, pero para Angular 6 o Angular 7, RxJS 6 se incluye de forma predeterminada, por lo que no es necesario instalarlo manualmente en su proyecto.

Publicar un comentario

0 Comentarios