De npm a nx: como convertir scripts de npm a nx

El título, en una imagen.
El título, en una imagen.

Si quieres ir directo al grano, ve aquí.

Trabajar con NX a veces puede ser un reto. Más aún cuando se está dando los primeros pasos con esta herramienta y descubres que muchas de las formas de trabajar a las que estabas acostumbrado han cambiado. Cuando creas un nuevo package dentro de tu workspace verás que no existe tu bien conocido package.json donde, entre otras cosas, solías definir tus scripts para ejecutarlos con npm run <script>. En su lugar, nx utiliza un nuevo tipo de fichero llamado project.json en donde se almacena toda la información relevante para gestionar dicho paquete.

[!NOTE] Recuerda que estamos refiriendonos a los packages por separados. En la raíz del proyecto seguirá existiendo el package.json principal.

Definir estos scripts en el projects.json no es mucho más complicado que hacerlo en un package.json pero sí que difiere a igual que su manera de ejecutarlo. Para esta guía crearemos una tarea en el proyecto “my-project” llamada “randomize” que imprimirá un mensaje.

Opción 1: Targets

Los targets en nx representan las acciones que puede realizar el proyecto y en esencia están formados por executors. Entrar en detalles en ellos se salen de esta guía, pero la idea detrás de ellos es la de tener tareas pre-definidas, con objetivos muy específicos y configurables. Algunos ejemplos de estos ya los podrás ver entre los targets por defecto que te generará nx.

Es posible que ya exista algún executor para la tarea que quieras llevar a cabo. Puedes consultar si alguno se ajusta a tu necesidad en su web.

Si ninguno encaja con lo que buscas o directamente quieres definir tu script y ya, tenemos 2 opciones:

  1. Crear un executor.
  2. Utilizar nx:run-commands.

En esta guía abordaremos solo la segunda opción.

Run-commands

La “silver bullet” que te valdrá para todo, este executor te permite especificar comandos a ejecutar y es la alternativa más directa a los scripts en npm.

Para usarlo simplemente lo configuramos en el projects.json:

{
  "targets": {
    "randomize": {
      // <------ Nombre de tu "script"
      "executor": "nx:run-commands",
      "options": {
        "command": "echo 'Randomizando valores.'"
      }
    }
  }
}

Recuerda que la forma que tenemos en nx para ejecutar tareas es nx run <proyecto>:<target>. En este caso:

$ nx run my-project:randomize.

Así de simple.

Podemos especificar más opciones si lo necesitamos, como cwd para definir la raíz de los comandos (por defecto toma la ruta root), definir una lista de comandos a ejecutar paralelalmente, etc.

Opción 2: Package.json

Espera, ¿no habías dicho que esto ya no existe? Bueno, no exactamente. En realidad y aunque no sea la opción recomendable, puedes crear uno para que conviva junto a tu project.json. Nx se dará cuenta de ello y los podrá interpretar. Para ello, debes de asegurarte de incluir lo siguiente:

{
  "name": "my-project",
  "nx": {}, // <------- Añadir esta propiedad
  "scripts": {
    "randomize": "echo 'Randomizando valores.'" // Tus scripts
  }
}

De este modo podrás ejecutar tus scripts nuevamente con nx run my-project:randomize.

Conclusión

El ecosistema de nx puede ser frustrante al inicio por tener tantas peculiaridades y ser algo muy diferente a lo que uno aprende cuando empieza a desarrollar proyectos “standalone”. Sin embargo, a medida que te familiarices con sus metodologías y particularidades verás como este se convierte en un gran aliado.

Fuentes