One place for hosting & domains

      Cómo habilitar la renderización del lado del servidor para una aplicación React


      Introducción

      La renderización del lado del servidor (SSR) es una técnica popular para renderizar una aplicación de una sola página (SPA) del lado del cliente en el servidor y enviar una página completamente renderizada al cliente. Esto permite que los componentes dinámicos se presenten como marcado HTML estático.

      Este enfoque puede ser útil para la optimización del motor de búsqueda (SEO) cuando la indexación no gestiona el JavaScript correctamente. También puede ser beneficioso en situaciones en las que descargar un paquete JavaScript grande sea difícil debido a una red lenta.

      En este tutorial, iniciará una aplicación React usando Create React App y luego modificará el proyecto para habilitar la renderización del lado del servidor.

      Al final de este tutorial, tendrá un proyecto funcional con una aplicación React del lado del cliente y una aplicación Express del lado del servidor.

      Nota: Alternativamente, Next.js ofrece un enfoque moderno para crear aplicaciones renderizadas estáticas y en servidor creadas con React.

      Requisitos previos

      Para completar este tutorial, necesitará lo siguiente:

      Este tutorial se verificó con Node v14.4.0 y npm v6.14.5.

      Paso 1: Crear la aplicación React y modificar el componente de la aplicación

      Primero, usamos npx para iniciar una nueva aplicación React usando la última versión de Create React App.

      Vamos a invocar nuestra aplicación my-ssr-app:

      A continuación, hacemos cd al nuevo directorio:

      cd my-ssr-app
      

      Finalmente, iniciamos nuestra nueva aplicación del lado del cliente para verificar la instalación:

      Debería ver una aplicación React de ejemplo en la ventana de su navegador.

      Ahora, vamos a crear un componente <Home>:

      A continuación, añada el siguiente código al archivo Home.js:

      src/Home.js

      import React from 'react';
      
      export default props => {
        return <h1>Hello {props.name}!</h1>;
      };
      

      Esto creará un encabezado <h1> con un mensaje "Hello" dirigido a un nombre.

      A continuación, vamos a renderizar <Home> en el componente <App>. Abra el archivo App.js:

      Luego, sustituya las líneas de código existentes con estas nuevas líneas de código:

      src/App.js

      import React from 'react';
      import Home from './Home';
      
      export default () => {
        return <Home name="Sammy" />;
      };
      

      Esto pasa un nombre al componente <Home> de forma que el mensaje que esperamos mostrar sea "Hello Sammy!".

      En el archivo index.js de nuestra aplicación, usaremos el método hydrate de ReactDOM en vez de render para indicar al renderizador DOM que estamos rehidratando la aplicación tras una renderización del lado del servidor.

      Vamos a abrir el archivo index.js:

      A continuación, sustituya el contenido del archivo index.js con el siguiente código:

      index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import App from './App';
      
      ReactDOM.hydrate(<App />, document.getElementById('root'));
      

      Con esto concluye la configuración del lado del cliente y podemos pasar a configurar el lado del servidor.

      Paso 2: Crear un servidor Express y renderizar el componente de la aplicación

      Ahora que tenemos nuestra aplicación lista, vamos a configurar un servidor que enviará una versión renderizada. Usaremos Express para nuestro servidor. Vamos a añadirlo al proyecto introduciendo el siguiente comando en la ventana de su terminal:

      • npm install express@4.17.1

      O usando yarn:

      A continuación, cree un directorio server junto al directorio src de la aplicación:

      A continuación, cree un nuevo archivo index.js que contendrá el código del servidor Express:

      Añada las importaciones que necesitará y defina algunas constantes:

      server/index.js

      import path from 'path';
      import fs from 'fs';
      
      import React from 'react';
      import express from 'express';
      import ReactDOMServer from 'react-dom/server';
      
      import App from '../src/App';
      
      const PORT = process.env.PORT || 3006;
      const app = express();
      

      A continuación, añada el código del servidor con algunas funciones para la gestión de errores:

      server/index.js

      // ...
      
      app.get('/', (req, res) => {
        const app = ReactDOMServer.renderToString(<App />);
      
        const indexFile = path.resolve('./build/index.html');
        fs.readFile(indexFile, 'utf8', (err, data) => {
          if (err) {
            console.error('Something went wrong:', err);
            return res.status(500).send('Oops, better luck next time!');
          }
      
          return res.send(
            data.replace('<div id="root"></div>', `<div id="root">${app}</div>`)
          );
        });
      });
      
      app.use(express.static('./build'));
      
      app.listen(PORT, () => {
        console.log(`Server is listening on port ${PORT}`);
      });
      

      Como puede ver, podemos importar nuestro componente <App> desde la aplicación del cliente directamente desde el servidor.

      Aquí suceden tres cosas importantes:

      • Indicaremos a Express que sirva contenido desde el directorio build como archivos estáticos.
      • Usamos un método desde ReactDOMServer, renderToString para renderizar nuestra aplicación a una secuencia HTML estática.
      • A continuación, leemos el archivo estático index.html desde la aplicación creada del cliente, inyectamos el contenido estático de nuestra aplicación en el <div> con un id de "root" y enviamos eso como la respuesta a la solicitud.

      Paso 3: Configurar webpack, Babel y secuencias de comandos npm

      Para que funcione el código de nuestro servidor, necesitaremos empaquetarlo y compilarlo usando webpack y Babel. Para conseguir esto, vamos a añadir las dependencias dev al proyecto introduciendo el siguiente comando en la ventana de su terminal:

      • npm install webpack@4.42.0 webpack-cli@3.3.12 webpack-node-externals@1.7.2 @babel/core@7.10.4 babel-loader@8.1.0 @babel/preset-env@7.10.4 @babel/preset-react@7.10.4 --save-dev

      O usando yarn:

      • yarn add webpack@4.42.0 webpack-cli@3.3.12 webpack-node-externals@1.7.2 @babel/core@7.10.4 babel-loader@8.1.0 @babel/preset-env@7.10.4 @babel/preset-react@7.10.4 --dev

      Nota: Una versión anterior de este tutorial instaló babel-core, babel-preset-env, y babel-preset-react-app. Estos paquetes han sido archivados desde entonces, y se utilizan las versiones repo mono.

      A continuación, cree un archivo de configuración Babel:

      A continuación, añada los valores prestablecidos env y react-app:

      .babelrc.json

      {
        "presets": [
          "@babel/preset-env",
          "@babel/preset-react"
        ]
      }
      

      Nota: Una versión anterior de este tutorial usó un archivo .babelrc (no una extensión de archivo .json). Este era un archivo de configuración para Babel 6, pero ya no es así para Babel 7.

      Ahora, crearemos una configuración webpack para el servidor que utiliza Babel Loader para compilar el código. Comience creando el archivo:

      Luego, añada las siguientes configuraciones al archivo webpack.server.js:

      webpack.server.js

      const path = require('path');
      const nodeExternals = require('webpack-node-externals');
      
      module.exports = {
        entry: './server/index.js',
      
        target: 'node',
      
        externals: [nodeExternals()],
      
        output: {
          path: path.resolve('server-build'),
          filename: 'index.js'
        },
      
        module: {
          rules: [
            {
              test: /.js$/,
              use: 'babel-loader'
            }
          ]
        }
      };
      

      Con esta configuración, nuestro paquete compilado de servidor aparecerá a la carpeta server-build en un archivo llamado index.js.

      Observe que el uso target: 'node' y externals: [nodeExternals()] desde webpack-node-externals, que solo omitirá los archivos desde node_modules en el paquete; el servidor puede acceder a estos archivos directamente.

      Esto completa la instalación de la dependencia y la configuración de webpack y Babel.

      Ahora repasaremos package.json para ayudar secuencias de comandos npm de ayuda:

      Añadiremos secuencias de comandos dev:build-server, dev:start y dev al archivo package.json para crear y presentar nuestra aplicación SSR fácilmente:

      package.json

      "scripts": {
        "dev:build-server": "NODE_ENV=development webpack --config webpack.server.js --mode=development -w",
        "dev:start": "nodemon ./server-build/index.js",
        "dev": "npm-run-all --parallel build dev:*",
        ...
      },
      

      Usamos nodemon para reiniciar el servidor cuando realicemos cambios. Y usamos npm-run-all para ejecutar varios comandos en paralelo.

      Vamos a instalar esos paquetes ahora introduciendo los siguientes comandos en la ventana de su terminal:

      • npm install nodemon@2.0.4 npm-run-all@4.1.5 --save-dev

      O usando yarn:

      • yarn add nodemon@2.0.4 npm-run-all@4.1.5 --dev

      Con esto, puede ejecutar lo siguiente para crear la aplicación del lado del cliente, empaquetar y compilar el código del servidor e iniciar el servidor en :3006:

      O usando yarn:

      La configuración webpack de nuestro servidor vigilará los cambios y nuestro servidor se reiniciará cuando haya cambios. Para la aplicación cliente, sin embargo, actualmente aún debemos crearla cada vez que realicemos cambios. Hay un problema abierto para eso aquí.

      Ahora, abra http://localhost:3006/ en su navegador web y verá su aplicación renderizada en el lado del servidor.

      Previamente, el código fuente reveló:

      Output

      <div id="root"></div>

      Pero ahora, con los cambios que ha realizado, el código fuente revela:

      Output

      <div id="root"><h1 data-reactroot="">Hello <!-- -->Sammy<!-- -->!</h1></div>

      La renderización del lado del servidor convirtió el componente <App> a HTML.

      Conclusión

      En este tutorial, inició una aplicación React y habilitó la renderización del lado del servidor.

      Con esta publicación, solo hemos visto un poco de lo que es posible. Las cosas se complican un poco cuando el direccionamiento, la recuperación de datos o Redux también tengan que ser parte de una aplicación renderizada en el lado del servidor.

      Un beneficio importante de usar SR es tener una aplicación que pueda rastrearse para ver su contenido, incluso para rastreadores que no ejecutan código JavaScript. Esto puede ayudar con la optimización de los motores de búsqueda (SEO) y la transmisión de metadatos a los canales de redes sociales.

      SSR también puede ayudar a menudo con el rendimiento porque una aplicación completamente cargada se envía desde el servidor sobre la primera solicitud. Para aplicaciones no triviales, su valor puede variar porque SSR requiere una configuración que puede volverse algo complicada y crea una mayor carga sobre el servidor. Si utiliza la renderización del lado del servidor para su aplicación React depende de sus necesidades específicas y de qué ventajas tienen más sentido para su caso de uso.

      Si desea aprender más sobre React, eche un vistazo a nuestra serie Cómo crear código en React.js, o consulte nuestra página del tema React para ver ejercicios y proyectos de programación.



      Source link

      Cómo funcionan los enlaces de ciclo de vida de Vue.js


      Introducción

      Los enlaces de ciclo de vida son una ventana para ver cómo la biblioteca que está usando funciona en segundo plano. Los enlaces de ciclo de vida le permiten saber cuándo se crea su componente, se añade al DOM, se actualiza o se destruye.

      Este diagrama de la documentación oficial de Vue.js captura el ciclo de vida de la instancia Vue.js:

      Diagrama del ciclo de vida de la instancia Vue.js

      Este artículo le explicará los enlaces de creación, montaje, actualización y destrucción.

      Cómo funcionan los enlaces de creación (inicialización)

      Los enlaces de creación son los primeros enlaces que se ejecutan en su componente. Le permiten realizar acciones antes de que su componente haya sido añadido al DOM. A diferencia de cualquier otro enlace, los enlaces de creación también se ejecutan durante la renderización del lado del servidor.

      Utilice los enlaces de creación si necesita configurar cosas en su componente, durante la renderización del cliente y la renderización del servidor.

      No tendrá acceso al DOM o al elemento de montaje objetivo (this.$el) dentro de los enlaces de creación.

      beforeCreate

      El enlace beforeCreate se ejecuta en el momento de inicializar su componente. Los datos no se han hecho reactivos y los eventos no se han configurado aún:

      ExampleComponent.vue

      <script>
      export default {
        beforeCreate() {
          console.log('At this point, events and lifecycle have been initialized.')
        }
      }
      </script>
      

      En este ejemplo, cuando el enlace beforeCreate se ejecuta, este fragmento de código registrará el mensaje: en este momento, los eventos y el ciclo de vida se han inicializado.

      created

      Puede acceder a los datos reactivos y a los eventos que están activos con el enlace created. Las plantilla y Virtual DOM no han sido montados aún o renderizados:

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{ propertyComputed }}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            property: 'Example property.'
          }
        },
      
        computed: {
          propertyComputed() {
            return this.property
          }
        },
      
        created() {
          console.log('At this point, this.property is now reactive and propertyComputed will update.')
          this.property = 'Example property updated.'
        }
      }
      </script>
      

      En este ejemplo, el fragmento de código almacenará property como Example property. Cuando se ejecuta el enlace created, se registrará un mensaje de At this point, this.property is now reactive and propertyComputed will update. y, luego, property se cambia a Example property updated.

      Más adelante en el ciclo de vida, {{ propertyComputed }} aparecerá como Example property updated, en vez de como Example property.

      En este paso, ha revisado algunos ejemplos de enlaces de creación y está listo para pasar a la siguiente parte del ciclo de vida, los enlaces de montaje.

      Cómo funcionan los enlaces de montaje (inserción DOM)

      Los enlaces de montaje a menudo son los enlaces más usados. Le permiten acceder a su componente inmediatamente antes y después de la primera renderización. Sin embargo, no se ejecutan durante la renderización del lado del servidor.

      Utilice enlaces de montaje si necesita acceder o modificar el DOM de su componente inmediatamente antes o después de la renderización inicial.

      No utilice los enlaces de montaje si necesita obtener algunos datos para su componente durante la inicialización.

      Nota: Utilice created (o created y activated para los componentes de keep-alive) para esto. Especialmente si necesita esos datos durante la renderización del lado del servidor.

      beforeMount

      El enlace beforeMount se ejecuta justo antes de que se produzca la renderización inicial y tras compilarse las funciones de plantilla o renderización:

      ExampleComponent.vue

      <script>
      export default {
        beforeMount() {
          console.log(`At this point, vm.$el has not been created yet.`)
        }
      }
      </script>
      

      En este ejemplo, cuando se ejecuta el enlace beforeMount, este fragmento de código registrará el mensaje: At this point, vm.$el has not been created yet..

      mounted

      En el enlace mounted, tendrá acceso completo al componente reactivo, las plantillas y DOM renderizado (a través de this.$el).

      Utilice mounted para modificar el DOM, sobre todo cuando integra bibliotecas no Vue:

      ExampleComponent.vue

      <template>
        <div ref="example-element">Example component.</div>
      </template>
      
      <script>
      export default {
        mounted() {
          console.log(`At this point, vm.$el has been created and el has been replaced.`);
          console.log(this.$el.textContent) // Example component.
        }
      }
      </script>
      

      En este ejemplo, cuando se ejecuta el enlace mounted, este fragmento de código registrará el mensaje At this point, vm.$el has been created and el has been replaced.. Además, se registrará un mensaje de Contenido de ejemplo (this.$el.textContent).

      En esta sección, exploró casos de uso para los enlaces de montaje. En el siguiente paso, revisó algunos ejemplos que usan los enlaces de actualización.

      Comprender los enlaces de actualización (Diff y Re-render)

      Los enlaces de actualización se invocan siempre que una propiedad reactiva usada por su componente cambie u otra cosa haga que se vuelva a renderizar. Le permiten engancharse al ciclo watch-compute-render para su componente.

      Utilice los enlaces de actualización si necesita saber cuándo se vuelve a renderizar su componente, quizá para depurar o perfilar.

      No utilice ganchos de actualización si necesita saber cuándo cambia una propiedad reactiva en su componente. Utilice propiedades computadas o vigilantes para eso.

      beforeUpdate

      El enlace beforeUpdate se ejecuta cuando los datos cambian en su componente, y el ciclo de actualización se inicia, justo antes de que el DOM se corrija y vuelva a renderizar.

      Utilice beforeUpdate si necesita obtener el nuevo estado de cualquier dato reactivo en su componente antes de que se renderice realmente.

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{counter}}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            counter: 0
          }
        },
      
        created() {
          setInterval(() => {
            this.counter++
          }, 1000)
        },
      
        beforeUpdate() {
          console.log(`At this point, Virtual DOM has not re-rendered or patched yet.`)
          // Logs the counter value every second, before the DOM updates.
          console.log(this.counter)
        }
      }
      </script>
      

      Primero, este fragmento de código guardará counter como 0. Cuando se ejecute el enlace created, aumentará counter cada 1000 ms. Cuando el enlace beforeUpdate se ejecuta, este fragmento de código registrará el mensaje: En este momento, Virtual DOM no se ha vuelto a renderizar ni se ha parcheado y se registra un número para counter,

      updated

      El enlace updated se ejecuta cuando cambian los datos en su componente y el DOM se vuelve a renderizar.

      Use updated si necesita acceder al DOM tras cambiar una propiedad:

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{counter}}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            counter: 0
          }
        },
      
        created() {
          setInterval(() => {
            this.counter++
          }, 1000)
        },
      
        updated() {
          console.log(`At this point, Virtual DOM has re-rendered and patched.`)
          // Fired every second, should always be true
          console.log(+this.$refs['example-element'].textContent === this.counter)
        }
      }
      </script>
      

      Primero, este fragmento de código guardará counter como 0. Cuando el enlace created se ejecute, incrementará counter cada 1000 ms. Cuando se ejecuta el enlace updated, este fragmento de código registrará el mensaje: En este momento, Virtual DOM se ha vuelto a renderizar y parcheado y se registra un valor booleano de true porque el valor renderizado y el valor actual con iguales.

      Ahora que ha explorado el uso de los enlaces de actualización, está listo para aprender sobre los enlaces de destrucción.

      Comprender los enlaces de destrucción (Desmontaje)

      Los enlaces de destrucción le permiten realizar acciones cuando se destruye su componente, como la limpieza o el envío de análisis. Se activan cuando su componente se desmonta y elimina del DOM.

      beforeDestroy

      beforeDestroy se activa justo antes del desmontaje. Su componente seguirá estando completamente presente y funcional.

      Utilice beforeDestroy si necesita limpiar eventos o suscripciones reactivas:

      ExampleComponent.vue

      <script>
      export default {
        data() {
          return {
            exampleLeakyProperty: 'This represents a property that will leak memory if not cleaned up.'
          }
        },
      
        beforeDestroy() {
          console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)
          // Perform the teardown procedure for exampleLeakyProperty.
          // (In this case, effectively nothing)
          this.exampleLeakyProperty = null
          delete this.exampleLeakyProperty
        }
      }
      </script>
      

      Este fragmento de código primero almacenará exampleLeakyProperty. Cuando el enlace beforeDestroy se ejecuta, este fragmento de código registrará el mensaje En este momento, los vigilantes, componentes secundarios y oyentes de eventos no hay sido desmontados aún y luego se elimina exampleLeakyProperty.

      destroyed

      Cuando llegue al enlace destroyed, su componente estará prácticamente vacío. Todo lo que estaba unido a él se ha destruido.

      Utilice destroyed si necesita realizar cualquier limpieza de último minuto o informar a un servidor remoto que el componente se ha destruido.

      ExampleComponent.vue

      <script>
      import ExampleAnalyticsService from './example-analytics-service'
      
      export default {
        destroyed() {
          console.log(`At this point, watchers, child components, and event listeners have been torn down.`)
          console.log(this)
          ExampleAnalyticsService.informService('Component destroyed.')
        }
      }
      </script>
      

      Primero, este fragmento de código importará ExampleAnalyticsService. Cuando se ejecute el enlace beforeDestroy, este fragmento de código registrará el mensaje At this point, watchers, child components, and event listeners have been torn down.. Lo que queda del componente se registrará en la consola y a ExampleAnalyticsService se pasará el mensaje Componente destruido.

      Con eso, completó su revisión general de los enlaces de ciclo de vida de Vue.js.

      Otros enlaces

      Hay otros dos enlaces, activated y deactivated. Estos son para los componentes keep-alive, un tema que está fuera del alcance de este artículo.

      Es suficiente decir que le permiten detectar cuando un componente que está envuelto en una etiqueta <keep-alive><keep-alive> se activa o desactiva. Es posible que los use para buscar datos para su componente o administrar los cambios de estado, comportándose de forma efectiva como created y beforeDestroy sin la necesidad de realizar una reconstrucción completa del componente.

      Conclusión

      En este artículo, hemos explicado los diferentes enlaces de ciclo de vida disponibles en el ciclo de vida de la instancia Vue.js. Ha explorado los diferentes casos de uso para los enlaces de creación, los enlaces de montaje, los enlaces de actualización y los enlaces de destrucción.

      Si desea saber más sobre Vue.js, consulte nuestra página del tema Vue.js para consultar ejercicios y proyectos de programación.



      Source link

      Cómo reiniciar sus aplicaciones Node.js automáticamente con nodemon


      Introducción

      En Node.js, debe reiniciar el proceso para que los cambios surtan efecto. Eso añade un otro paso a su flujo de trabajo para que los cambios surtan efecto. Puede eliminar este paso adicional usando nodemon para reiniciar el proceso automáticamente.

      nodemon es una utilidad de interfaz de línea de comandos (CLI) desarrollada por @rem que envuelve su aplicación Node, vigila el sistema de archivos y reinicia automáticamente el proceso.

      En este artículo, aprenderá cómo instalar, preparar y configurar nodemon.

      Requisitos previos

      Si desea seguir este artículo, necesitará:

      Paso 1: Instalar nodemon

      Primero, deberá instalar nodemon en su equipo. Instale la utilidad global o localmente en su proyecto usando nom o Yarn:

      Instalación global

      Puede instalar nodemon globalmente con npm:

      O con Yarn:

      Instalación local

      También puede instalar nodemon localmente con npm. Cuando realice una instalación local, podemos instalar nodemon como dependencia dev con --save-dev (o --dev):

      • npm install nodemon --save-dev

      O con Yarn:

      Algo que debe tenerse en cuenta con una instalación local es que no podrá usar el comando nodemon directamente desde la línea de comandos:

      Output

      • command not found: nodemon

      Sin embargo, puede usarlo como parte de algunas secuencias de comandos de npm o con npx.

      Con esto finalizará el proceso de instalación de nodemon. A continuación, usaremos nodemon con nuestros proyectos.

      Paso 2: Configurar un proyecto Express de ejemplo con nodemon

      Puede usar nodemon para iniciar una secuencia de comandos de Node. Por ejemplo, si tenemos una configuración de servidor Express en un archivo server.js, podemos iniciarlo y vigilar los cambios de esta forma:

      Puede pasar argumentos de la misma forma que si estuviese ejecutando la secuencia de comandos con Node:

      Cada vez que realice un cambio a un archivo con una de las extensiones vigiladas por defecto (.js, .mjs, .json, .coffee o .litcoffee) en el directorio actual o en un subdirectorio, el proceso se reiniciará.

      Vamos a suponer que escribimos un archivo server.js de ejemplo que da como resultado el mensaje Dolphin app listening on port ${port}!.

      Podemos ejecutar el ejemplo con nodemon:

      Vemos el siguiente resultado del terminal:

      Output

      [nodemon] 1.17.3 [nodemon] to restart at any time, enter `rs` [nodemon] watching: *.* [nodemon] starting `node server.js` Dolphin app listening on port 3000!

      Aunque nodemon aún está ejecutándose, vamos a realizar un cambio al archivo server.js para que dé como resultado el mensaje: Shark app listening on port ${port}!.

      Vemos el siguiente resultado adicional del terminal:

      Output

      [nodemon] restarting due to changes... [nodemon] starting `node server.js` Shark app listening on port 3000!

      El resultado del terminal desde nuestra aplicación Node.js se muestra como se espera. Puede reiniciar el proceso en cualquier momento escribiendo rs y presionando ENTER.

      Como alternativa, nodemon también buscará un archivo main especificado en el archivo package.json de su proyecto:

      package.json

      {
        // ...
        "main": "server.js",
        // ...
      }
      

      O una secuencia de comandos start:

      package.json

      {
        // ...
        "scripts": {
          "start": "node server.js"
        },
        // ...
      }
      

      Una vez que realice los cambios a package.json, puede invocar nodemon para iniciar la aplicación de ejemplo en modo de vigilancia sin tener que pasar server.js.

      Paso 3: Usar las opciones

      Puede modificar los ajustes de configuración disponibles para nodemon.

      Vamos a repasar algunas de las opciones principales:

      • --exec: Utilice el interruptor --exec para especificar un binario con el que ejecutar el archivo. Por ejemplo, cuando se combina con el binario ts-node, --exec puede ser útil para vigilar los cambios y ejecutar archivos TypeScript.
      • --ext: Especifique diferentes extensiones de archivo que vigilar. Para este interruptor, proporcione una lista separada por comas de extensiones de archivo (por ejemplo, --ext.js,ts).
      • --delay: Por defecto, nodemon espera un segundo para reiniciar el proceso cuando un archivo cambia, pero puede especificar un retraso diferente con el interruptor --delay. Por ejemplo, nodemon --delay 3.2 para un retraso de 3,2 segundos.
      • --watch: Utilice el interruptor --watch para especificar múltiples directorios o archivos que vigilar. Añada un interruptor --watch para cada directorio que desee vigilar. Por defecto, el directorio actual y sus subdirectorios se vigilan, de forma que con --watch puede estrechar eso a solo subdirectorios o archivos específicos.
      • --ignore: Utilice el interruptor --ignore para ignorar ciertos archivos, patrones de archivo o directorios.
      • --verbose: Un resultado con más texto con información sobre qué archivos cambiaron para activar un reinicio.

      Puede ver todos las opciones disponibles con el siguiente comando:

      Usando estas opciones, vamos a crear el comando para satisfacer el siguiente escenario:

      • vigilar el directorio del servidor
      • “especificando
      • ignorar archivos con un sufijo .test.ts
      • ejecutar el archivo (server/server.ts) con ts-node
      • esperar tres segundos para reiniciar tras un cambio de archivo
      • nodemon --watch server --ext ts --exec ts-node --ignore '*.test.ts' --delay 3 server/server.ts

      Este comando combina las opciones --watch, --ext, --exec, --ignore y --delay para satisfacer las condiciones de nuestro escenario.

      Paso 4: Usar las configuraciones

      En el ejemplo anterior, añadir interruptores de configuración cuando se ejecuta nodemon puede ser algo tedioso. Una mejor solución para los proyectos que necesitan configuraciones específicas es especificar estas configuraciones en un archivo nodemon.json.

      Por ejemplo, aquí están las mismas configuraciones que en el ejemplo de línea de comandos anterior, pero colocados en un archivo nodemon.json:

      nodemon.json

      {
        "watch": ["server"],
        "ext": "ts",
        "ignore": ["*.test.ts"],
        "delay": "3",
        "execMap": {
          "ts": "ts-node"
        }
      }
      

      Observe el uso de execMap en vez del interruptor --exec. execMap le permite especificar binarios que deberían usarse dadas algunas extensiones de archivo.

      Alternativamente, si prefiere no añadir un archivo de configuración nodemon.json a su proyecto, puede añadir estas configuraciones al archivo package.json bajo la clave nodemonConfig:

      package.json

      {
        "name": "test-nodemon",
        "version": "1.0.0",
        "description": "",
        "nodemonConfig": {
          "watch": [
            "server"
          ],
          "ext": "ts",
          "ignore": [
            "*.test.ts"
          ],
          "delay": "3",
          "execMap": {
            "ts": "ts-node"
          }
        },
        // ...
      

      Una vez que realice los cambios a nodemon.json o package.json, puede iniciar nodemon con la secuencia de comandos deseada:

      nodemon recogerá las configuraciones y las utilizará. De esta forma puede guardar, compartir y repetir sus configuraciones para evitar copiar y pegar o escribir errores en la línea de comandos.

      Conclusión

      En este artículo, ha explorado cómo usar nodemon con sus aplicaciones Node.js. Esta herramienta ayuda a automatizar el proceso de detener e iniciar un servidor Node para ver los cambios.

      Para obtener más información sobre las funciones disponibles y resolver problemas, consulte la documentación oficial.

      Si desea saber más sobre Node.js, consulte nuestra página del tema Node.js para consultar ejercicios y proyectos de programación.





      Source link