Trucos de 13 npm para ahorrar tiempo

Todos los días, millones de desarrolladores, al crear sus aplicaciones JavaScript, recurren a npm (o a Yarn). Ejecutar comandos como npm init o npx create-react-app ha convertido en una forma familiar de comenzar a trabajar en casi cualquier proyecto de JavaScript. Puede ser un servidor, un cliente o incluso una aplicación de escritorio.

Pero la utilidad npm no solo es capaz de inicializar proyectos o instalar paquetes. El autor del material, cuya traducción publicamos hoy, quiere hablar sobre trucos de 13 npm que le permitirán exprimir todo lo que sea posible de este sistema. Aquí consideraremos técnicas de varios tamaños, desde el uso de atajos hasta la personalización del comportamiento de npm init .



Muchos programadores usan npm diariamente. Esto significa que a la larga, incluso un pequeño ahorro de tiempo puede cambiar algo para mejor. Este material está destinado principalmente a desarrolladores principiantes y desarrolladores de nivel medio. Sin embargo, incluso si usted es un profesional, el autor del material espera que pueda encontrar aquí un par de cosas interesantes que no haya encontrado antes.

Si no está familiarizado con npm, tenga en cuenta que el programa que nos interesa está instalado con Node.js. Si está trabajando en Windows, se recomienda que instale Git Bash para reproducir algo de lo que se está discutiendo aquí.

1. Breves opciones para grabar comandos básicos

Comencemos con lo básico. Al pasar un poco de tiempo explorando versiones abreviadas de los comandos npm más comunes, se ahorrará mucho tiempo en el futuro.

• Instalar paquetes. Opción normal: npm install . Atajo: npm i .
• Ejecución de pruebas. Opción normal: npm test . Atajo: npm t .
• Llamada de ayuda Opción común: npm --help . Atajo: npm -h .
• Indicador de configuración global. Opción común: --global . Atajo: -g .
• La instalación del paquete marca como una dependencia de desarrollo. La opción habitual es --save-dev . Atajo: -D .
• npm init configuración predeterminada de npm init . La opción habitual es npm init --yes o npm init --force . Atajo: npm init -y o npm init -f .

Ahora no necesita usar el --save o -S para guardar paquetes. Los paquetes se guardan por defecto. Y para instalar un paquete sin guardarlo, puede usar el indicador --no-save .

▍ Opciones de grabación cortas para comandos menos comunes

Aquí hay algunas abreviaturas más útiles, que, sin embargo, no se usan tan ampliamente como las que acabamos de revisar.

• Guardar un paquete como una dependencia opcional. La opción habitual: --save-optional . Atajo: -O .
• Guardar información sobre la versión exacta del paquete. La opción habitual es --save-exact . Atajo: -E .

El uso del comando npm install con el --save-bundle o -B hace que las entradas en los paquetes instalados aparezcan en package.json , en la sección bundledDependencies . Estos paquetes se empaquetarán con el proyecto una vez publicados. Para crear un archivo tarball que contenga archivos de proyecto y paquetes enumerados en bundledDependencies , puede usar el comando npm pack .

▍ Abreviatura del directorio raíz

Normalmente, el símbolo de punto ( . ) Se utiliza para representar el directorio raíz de una aplicación o (según el contexto) para representar un punto de entrada a una aplicación. En npm, esto es lo que se establece como el valor de la propiedad main en el archivo package.json :

 {  "main": "index.js" } 

Esta taquigrafía se puede usar, por ejemplo, con comandos como npx create-react-app . Entonces, en lugar de ejecutar este comando en la forma de npx create-react-app my-app (que conducirá a la creación de una nueva carpeta my-app ), puede ejecutar este comando de esta manera: npx create-react-app . (preste atención al punto que viene después del comando). Esto le permitirá crear un proyecto de plantilla de aplicación React en la carpeta en la que se encuentra en el momento en que se ejecuta el comando.

2. Establecer valores predeterminados para npm init

Al ejecutar constantemente el comando npm init para crear un nuevo proyecto, lo más probable es que ingrese los mismos datos una y otra vez en respuesta a las preguntas del sistema. Por ejemplo, es probable que usted sea el autor de la mayoría de los proyectos que cree. Para ahorrar tiempo al ingresar los mismos datos, puede establecer sus propios valores predeterminados para los campos correspondientes:

 npm config set init.author.name "Joe Bloggs" npm config set init.author.email "joebloggs@gmail.com" npm config set init.author.url  "joebloggs.com" npm config set init.license   "MIT" 

Para verificar la corrección de agregar dicha información al sistema, ingrese el npm config edit . Esto abrirá el archivo de configuración en el editor del sistema. Si desea editar los parámetros globales de npm, use el npm config edit -g .

Para volver a la configuración predeterminada, puede usar el siguiente script. Su primera línea elimina los datos de configuración del archivo, y la segunda lo llena con los valores predeterminados.

 echo "" > $(npm config get userconfig) npm config edit 

La secuencia de comandos anterior restablece los valores predeterminados para el usuario. El siguiente script restablece los valores predeterminados globales:

 echo "" > $(npm config get globalconfig) npm config --global edit 

3. Scripts multiplataforma

Cualquier código que se ejecute en la línea de comando puede encontrar problemas de compatibilidad. Esto es especialmente cierto para las incompatibilidades entre sistemas basados ​​en Windows y Unix (esto incluye Mac y Linux). Esto no es un problema si usted y solo usted está trabajando en un determinado proyecto. Pero en muchos casos, la compatibilidad de secuencias de comandos multiplataforma es importante. Por ejemplo, trabajar independientemente del sistema operativo es una gran ventaja para cualquier proyecto de código abierto, capacitación o demostración.

Afortunadamente, resolver el problema de compatibilidad de script no es particularmente difícil. Tenemos varias opciones a nuestra disposición. Sin embargo, aquí me gustaría hablar sobre uno de ellos, sobre el uso del cual obtuve los mejores resultados. Este es un paquete cross-env . Debe instalarse como una dependencia de desarrollo utilizando el npm i -D cross-env . Entonces debe poner cross-env delante de cada variable de entorno. Por ejemplo, podría verse así:

 {  "scripts": {    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js" } 

Descubrí que el paquete cross-env es la herramienta más conveniente para lograr la compatibilidad de scripts multiplataforma. Pero será útil que eche un vistazo a las siguientes dos herramientas populares que pueden ayudarlo a resolver este problema:

• Paquete Rimraf . Se puede instalar globalmente para ejecutar scripts multiplataforma.
• Paquete ShellJS . Esta es una implementación portátil de Node.js del shell de comandos de Unix.

4. Ejecución paralela de scripts

Para organizar la ejecución secuencial de comandos en el shell de Linux, se utiliza la construcción && . ¿Qué hay de ejecutar scripts paralelos? Para lograr esto, puede elegir el paquete npm apropiado. Los paquetes más populares de este tipo son concurrentemente y npm-run-all . Aquí demostramos el uso del paquete concurrente.

Primero, el paquete seleccionado debe instalarse como una dependencia de desarrollo: npm i -D concurrently . Luego, en package.json puede usar una construcción de la siguiente forma:

 {  "start": "concurrently \"command1 arg\" \"command2 arg\"" } 

5. Ejecución de scripts ubicados en varios directorios

A veces te encuentras con aplicaciones que tienen varios archivos package.json ubicados en diferentes directorios. Sería conveniente, por ejemplo, ejecutar scripts declarados en ellos, estando en el directorio raíz del proyecto. Esto es mucho mejor que tener que viajar a diferentes carpetas cada vez que necesite ejecutar un script. Para hacer esto, puede usar los siguientes dos enfoques.

Para comenzar, puede usar el cd para navegar automáticamente al directorio deseado. Puede verse más o menos así:

 cd folder && npm start && cd .. 

Pero este problema se puede resolver de una manera más interesante. Consiste en utilizar el indicador --prefix , con el que puede especificar la ruta:

 npm start --prefix path/to/your/folder 

El siguiente es un ejemplo de aplicación de esta solución desde una aplicación real. Aquí necesitamos ejecutar npm start para las partes del cliente y el servidor del proyecto. Su código, respectivamente, se encuentra en las carpetas del client y del server .

 "start": "concurrently \"(npm start --prefix client)\" \"(npm start --prefix server)\"", 

6. Retrasar el lanzamiento del script hasta que un recurso esté disponible

Cuando se desarrollan aplicaciones de pila completa, a menudo surge la necesidad de ejecutar las partes del cliente y del servidor de la aplicación. El paquete de espera le permite sincronizar la ejecución de ciertos procesos. En nuestro caso, es necesario que antes de iniciar la parte cliente de la aplicación, un cierto puerto esté disponible.

Por ejemplo, hay un script de desarrollo que se usa en una aplicación Electron cuya interfaz se escribe usando React. El script, que se usa concurrently , ejecuta la capa de presentación de la aplicación y la ventana Electron en paralelo. Pero usando el modo de wait-on puede hacer que la ventana Electron se abra solo cuando la capa de presentación React esté lista para usar y accesible en http://localhost:3000 . Así es como se ve wait-on uso de wait-on :

 "dev": "concurrently \"cross-env BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"", 

Además, el comportamiento estándar de los proyectos React es abrir automáticamente una ventana del navegador. Si usa React with Electron, esto no es necesario. Esto puede BROWSER=none utilizando la variable de entorno BROWSER=none , antes de la cual, en aras de la compatibilidad multiplataforma de la solución, se encuentra el comando cross-env .

7. Listado y trabajo con scripts disponibles

Para enumerar los scripts disponibles en package.json , solo vaya al directorio raíz del proyecto y ejecute el comando npm run en el terminal.

Pero hay una forma aún más conveniente de enumerar scripts. Al usarlo, el script deseado puede seleccionarse inmediatamente de la lista y ejecutarse. Para utilizar esta forma de trabajar con scripts, necesitamos instalar globalmente el ntl (Lista de tareas de Npm):

 npm i -g ntl 

Luego, en la carpeta del proyecto, debe ejecutar el comando ntl . Mostrará una lista de los scripts disponibles y le dará la oportunidad de seleccionar el script que desea ejecutar. Así es como se ve.


Usando el comando ntl

Esta característica puede ser muy útil si no sabe exactamente qué scripts hay en el proyecto. También es bueno en los casos en que el programador desea reemplazar la entrada de un comando largo para ejecutar un script con la entrada de un comando corto y presionar rápidamente algunas teclas más en el teclado.

8. Ejecución de pre-scripts y post-scripts

Es posible que esté familiarizado con los scripts previos y posteriores a la build que le permiten ejecutar algún código antes y después de ejecutar el script de build . Tales guiones anteriores y posteriores se pueden definir para cualquier otro guión. Incluyendo aquellos cuyas descripciones son agregadas a p ackage.json por el programador.

Esto no solo le permite hacer el código más limpio, sino que también ayuda a ejecutar los scripts anteriores y posteriores de forma aislada.

9. Control de versiones de la aplicación.

En lugar de cambiar manualmente la versión de la aplicación, el programador puede usar comandos especiales npm . Para aumentar la parte correspondiente del número de versión de la aplicación, puede usar el npm version seguido de major , minor o patch :

 // 1.0.0 npm version patch // 1.0.1 npm version minor // 1.1.0 npm version major // 2.0.0 

Dependiendo de la frecuencia con la que actualice su aplicación, puede ahorrar tiempo aumentando automáticamente el número de versión cada vez que implemente una nueva versión de la aplicación. Por ejemplo, así:

 {  "predeploy": "npm version patch" } 

10. Edición de package.json desde la línea de comando

El archivo package.json es un archivo json normal, por lo que puede editarse directamente desde la línea de comandos utilizando la utilidad json . Esto abre nuevas posibilidades en situaciones donde necesita modificar package.json , permitiéndole crear sus propias versiones abreviadas de comandos. Instale el paquete json nivel mundial:

 npm install -g json 

Luego, la utilidad json se puede usar para editar rápidamente el archivo usando el modificador -I . Por ejemplo, para agregar un nuevo script foo con la bar valor al archivo, puede usar el siguiente comando:

 json -I -f package.json -e 'this.scripts.foo="bar"' 

En la siguiente sección, verá un ejemplo más práctico del uso de la utilidad json .

11. Automatización de la configuración y apertura del repositorio.

Si hay una entrada de "repository" en su archivo package.json , esto significa que puede abrir la página del repositorio en el navegador utilizado por el sistema de manera predeterminada. Para hacer esto, use el comando npm repo .

Si su proyecto ya está conectado al repositorio remoto y tiene instalada la utilidad de línea de comandos git , esto significa que puede encontrar la dirección de su repositorio utilizando el siguiente comando:

 git config --get remote.origin.url 

Pero eso no es todo. Si, de acuerdo con el consejo anterior, instaló la utilidad json , puede usar el siguiente script para agregar automáticamente la información correcta del repositorio a package.json :

 json -I -f package.json -e "this.repository=\"$(git config --get remote.origin.url)\"" 

12. Creando tu propio script para controlar el comando npm init

Ahora hablemos de resolver una tarea más grande. Es decir, vamos a desarrollar nuestro propio script que controla el funcionamiento del comando npm init , que acepta la URL del repositorio de GitHub y envía automáticamente la primera confirmación. Aquí hablamos sobre cómo crear tales scripts. Y en la siguiente sección, que será nuestro último consejo, hablaremos sobre trabajar con git .

Puede personalizar el comportamiento del comando npm init utilizando el .npm-init.js . Creemos dicho archivo en el directorio de inicio del usuario actual (en Windows generalmente es C:/Users/<username> , y en Mac es /Users/<username> ). Después de eso, ejecute el siguiente comando que le dice a npm dónde se encuentra exactamente este archivo:

 npm config set init-module ~\.npm-init.js 

Antes de integrarse con git , veamos un ejemplo simple del .npm-init.js , que reproduce las preguntas que el sistema le hace al usuario cuando usa el comando npm init sin configuraciones adicionales:

 module.exports = {  name: prompt('package name', basename || package.name),  version: prompt('version', '0.0.0'),  decription: prompt('description', ''),   main: prompt('entry point', 'index.js'),  repository: prompt('git repository', ''),  keywords: prompt(function (s) { return s.split(/\s+/) }),  author: prompt('author', 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)'),  license: prompt('license', 'ISC') } 

Cada pregunta se basa en la siguiente plantilla:

 nameInPackage: prompt('nameInPrompt', 'defaultValue') 

Para indicar un cierto valor y no hacer una pregunta al usuario, simplemente elimine el método de prompt .

Si desea volver a la configuración estándar de npm init , simplemente elimine el .npm-init.js .

13. Enviar el primer commit al repositorio de GitHub usando npm init

Para ejecutar comandos git en el .npm-init.js necesitamos encontrar una manera de trabajar con la línea de comandos. Puede usar el módulo child_process para child_process . Lo conectamos en la parte superior del archivo, y dado que solo necesitamos la función execSync , solo la importamos, usando la desestructuración:

 const { execSync } = require('child_process'); 

Además, crearemos una función auxiliar que muestre los resultados de nuestra función en la consola:

 function run(func) {  console.log(execSync(func).toString()) } 

Y finalmente, creemos el bloque de solicitud apropiado para manejar la URL del repositorio de GitHub. Si el script tiene la URL, crearemos el archivo README.md y enviaremos el primer commit al repositorio.

Entonces, uno de los elementos del objeto .npm-init.js debería ser el siguiente código:

 repository: prompt('github repository url', '', function (url) {  if (url) {    run('touch README.md');    run('git init');    run('git add README.md');    run('git commit -m "first commit"');    run(`git remote add origin ${url}`);    run('git push -u origin master');   return url; }) 

Así es como debe verse el código completo para el archivo .npm-init.js después de esta adición:

 const { execSync } = require('child_process'); function run(func) {  console.log(execSync(func).toString()) } module.exports = {  name: prompt('package name', basename || package.name),  version: prompt('version', '0.0.0'),  decription: prompt('description', ''),  main: prompt('entry point', 'index.js'),  keywords: prompt(function (s) { return s.split(/\s+/) }),  author: prompt('author', 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)'),  license: prompt('license', 'ISC'),  repository: prompt('github repository url', '', function (url) {    if (url) {      run('touch README.md');      run('git init');      run('git add README.md');      run('git commit -m "first commit"');      run(`git remote add origin ${url}`);      run('git push -u origin master');       return url;  }), } 

Así es como se ve el archivo package.json que el sistema crea usando este .npm-init.js :

 {  "name": "Custom npm init",  "version": "0.0.0",  "decription": "A test project, to demonstrate a custom npm init script.",  "main": "index.js",  "keywords": [],  "author": "Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)",  "license": "ISC",  "repository": {    "type": "git",    "url": "git+https://github.com/JoeBloggs/custom.git"  },  "bugs": {    "url": "https://github.com/JoeBloggs/custom/issues"  },  "homepage": "https://github.com/JoeBloggs/custom#readme" } 

Al configurar el proceso de inicialización de nuevos proyectos, puede ir más allá. Por ejemplo, para asegurarse de que al crear un proyecto, se cree un nuevo repositorio para él.

Resumen

Espero que este material te haya ayudado a ver lo que puedes lograr con npm. Quiero creer que ha encontrado algo aquí que le permitirá trabajar de manera más productiva, ya sea que estemos hablando de usar versiones abreviadas de comandos, de scripts de package.json o de configurar npm init para satisfacer sus necesidades.

Estimados lectores! ¿Automatizas el trabajo con npm?