Estos trucos de NPM te convertirán en un profesional

Después de usar NPM durante casi 8 años, he aprendido cosas en el camino que desearía saber cuando comencé. Llamémoslos trucos, cosas que mejoraron drásticamente mi forma de trabajar con NPM. Hoy quiero compartir contigo mis 10 trucos principales.

1. Ahorre tiempo. ⏲ ​​Usar atajos

Esta es una de las características más útiles pero no tan bien documentadas. Un atajo para un comando puede parecer algo trivial, pero la verdad es que escribirás entre un 30 y un 60% menos de código. Ahorrará tiempo que puede dedicar a algo significativo, como beber una taza de café extra ☕️?

En vez de npm install

escribir .npm i

En vez de npm install--save

escribir .npm i -S

En vez de npm install--save-dev

escribir .npm i -D

En vez de npm install--global

escribir .npm i -G

? ¡Atajo de bonificación! ¿Quieres impresionar a tus colegas? ? Aquí viene…

En vez de npm test

escribir .npm t

2. Instale varios paquetes en un comando

¿Por qué escribir varias líneas cuando puedes escribir una? ? Si conoce sus paquetes de memoria, la opción más rápida es instalarlos todos en una sola línea, ¡pero tenga cuidado! Un paquete mal escrito y todo el comando fallará. Si no está seguro de los nombres, instálelos uno por uno.

npm i -S react redux react-redux 

3. Instale paquetes de diferentes fuentes

De forma predeterminada, cuando se ejecuta npm-install, NPM instalará la última versión del registro npm (//registry.npmjs.org)

¡Pero hay más! NPM también puede instalar paquetes de otras fuentes, como una URL o un archivo tarball.

Al hacer sus propios paquetes o solicitudes de extracción para paquetes existentes, esta característica es poderosa. Por ejemplo, si tiene su propia bifurcación de Redux, puede instalar su paquete directamente desde su bifurcación. (Cambie usernamea su nombre de usuario en GitHub).

npm i 

Aún mejor, si está usando un repositorio de GitHub, puede usar este atajo:

npm i username/redux

¡Hay más! También puede instalar un paquete de una rama específica. Útil al probar una versión futura. Simplemente agregue #junto con el nombre de la rama al final.

npm i username/redux#

? ¡Atajo extra! ¿No estás usando GitHub? No se preocupe, también hay atajos para BitBucket y GitLab :

npm i bitbucket:username/myrepositorynpm i gitlab:username/myrepository

4. Vinculación de paquetes

A veces, desea trabajar en un proyecto y desarrollar sus paquetes al mismo tiempo. ¡Confirmar y enviar su paquete a un repositorio remoto para cada cambio que desee probar es agotador! ? En su lugar, puede utilizar una función llamada enlace de paquetes .

El enlace de paquetes funciona creando un enlace simbólico en su carpeta node_modules que apunta al repositorio local de su paquete. De esta manera, puede editar paquetes localmente y los cambios estarán disponibles instantáneamente en el proyecto que lo usa.

¡La forma más sencilla de entender el enlace de paquetes es probarlo!

Digamos que tenemos un proyecto llamado myprojecty un paquete llamado mypackage. Queremos mypackageser una dependencia de myproject.

Ve a la carpeta mypackagey escribe

npm link

¡Agradable! Ahora, ve a la carpeta myprojecty escribe

npm link mypackage

¡Hecho! Eche un vistazo más de cerca a la estructura de carpetas

Como puede ver, myproject/node_modules/mypackageahora es un enlace simbólico a la carpeta mypackage. Ahora puede continuar con el desarrollo mypackagey todos los cambios que realice estarán disponibles instantáneamente en myproject.

5. El comando npx

Hay muchas herramientas de scripting en NPM que probablemente usará, pero que no serán parte de su paquete de tiempo de ejecución. Grunt, gulp, react-create-app, react-native-cli y mocha son solo algunos.

Antes de NPM 5.x, tenía que instalar estas herramientas como paquetes globales o como devDependencies. Esto requirió mucho tiempo, no solo para instalar sino para mantener todas sus herramientas para múltiples proyectos. Además, la mayoría de las herramientas solo las utilizará una o dos veces.

¡Aquí, el NPX binario viene al rescate y nos ahorra mucho trabajo! Por ejemplo, para iniciar un nuevo proyecto de reacción, simplemente puede escribir:

npx create-react-app my-new-project

La última versión de create-react-app se descargará y ejecutará de inmediato. No más herramientas de instalación y mantenimiento como paquetes globales.

6. Supervise y limpie su proyecto

Es importante comprender lo que sucede bajo el capó al instalar paquetes para resolver problemas y hacer que el árbol de dependencias y el tamaño final del paquete sean lo más pequeños posible.

En primer lugar, necesitamos una buena descripción general del árbol de dependencias y qué versiones de paquetes se han instalado realmente. Usa el comando npm list. Agregue la bandera --depth=0para enumerar solo los paquetes de nivel superior y agregue -gpara enumerar sus paquetes globales.

npm listnpm list --depth=0 -g

NPM es bueno para mantenerse y aplanar el árbol de dependencias sobre la marcha, pero siempre es un buen hábito deducir su proyecto antes de publicarlo. Podría eliminar algunos paquetes por ti.

npm dedupe

También es una gran idea obtener una buena descripción general de sus paquetes obsoletos y faltantes. ¿Es difícil no amar esta vista por sus columnas bien organizadas y la combinación de colores de ambiente navideño?

npm outdated

Si obtiene muchas filas rojas, debe ejecutar npm updatepara actualizar sus paquetes a la última versión posible de acuerdo con su package.json, que también se indica en la columna deseada

npm update

¡Excelente! Ahora, si npm oudatedvuelve a correr , todas las filas rojas deberían desaparecer.

Si está utilizando el signo ^de intercalación delante de sus versiones en package.json, las versiones principales no se actualizarán (de ahí las filas amarillas). Esto es bueno, porque puede haber cambios importantes que se actualizan a una nueva versión principal.

Si aún desea actualizar todo a la última versión, puede usar la herramienta npm-update-all. Es tan fácil como ejecutar este comando en la carpeta de su proyecto.

npx npm-update-all

¡Frio! Ahora tienes la última versión de todas tus dependencias. Su package.json también se actualiza. ⚠️ Tenga cuidado con los cambios importantes ⚠️

7. Vaya a la página de inicio para obtener un paquete.

¿Necesita consultar la documentación de un paquete? ¿Por qué molestarse en cambiar al navegador y empezar a buscar en Google cuando todo lo que necesita es la terminal? ?

Abra el repositorio de un paquete en el navegador.

npm repo

Abre la página de inicio

npm home

Abra la documentación

npm docs

8. Utilice scripts de NPM

¡Me encantan los scripts npm! En lugar de usar corredores de tareas como Gulp y Grunt para automatizar tareas repetitivas, en la mayoría de los casos puede usar scripts npm por varias razones:

➕ Menos dependencias de desarrollo o dependencias globales que mantener.

➕ No hay nuevas herramientas para que los colaboradores y los miembros del equipo aprendan

➕ Menos código y configuración.

En primer lugar, tiene scripts predefinidos como start, install, test, prepublishese que tienen significados especiales en NPM. Puede leer sobre cómo se pueden usar en mi tutorial anterior donde construimos un paquete npm desde cero.

También puede crear sus propios scripts personalizados. Aquí hay un ejemplo de un script que formateará su código en la srccarpeta con ESLint:

package.json:

"scripts":{"test": "jest","format": "eslint src --fix"}

Ahora puede ejecutar npm run formaty ESLint hará su trabajo.

Puede hacer muchas cosas con los scripts npm, como ejecutar comandos de shell y encadenar scripts uno tras otro. Consulte npm-scripts para una comprensión más profunda de esta poderosa función.

9. Ejecución de scripts de NPM en vsCode

A veces tengo 30 npm-scripts en mi package.json (No es broma). ? Afortunadamente, si está utilizando Visual Studio Code, puede enumerar todos sus scripts npm en el explorador y ejecutar sus scripts con un clic de un botón. Asegúrese de que esta configuración esté habilitada:

npm.enableScriptExplorer: true

10. Establezca sus valores predeterminados

Al crear un nuevo proyecto, se ejecutará npm inity se le harán preguntas sobre su proyecto. Para ahorrar tiempo, probablemente escriba ejecutar npm init -ypara completar el package.json con los valores predeterminados.

Pero, ¿cuáles son exactamente sus valores predeterminados? ? ¡Me gusta configurar algunos de estos yo mismo para ahorrar tiempo más adelante! ?

npm config set init.author.name "Carl-Johan (CJ) Kihl"

npm config set init.author.email "[email protected]"

Resumen

¡Esos fueron mis consejos para NPM por ahora! Si tiene más consejos y trucos que desea compartir, agregue un comentario a continuación. ?

? ¡Atajo de bonificación!

Imagina que es viernes por la noche y estás a punto de finalizar un nuevo proyecto, pero estás demasiado cansado para escribir npm dedupe. ?

¡Sin preocupaciones! Guarde tres letras escribiendo:

npm ddp

Gracias por leer.