Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Primeros pasos en NPM

5/15
Recursos

Desde una terminal o l铆nea de comandos, crea un directorio con el nombre de tu proyecto. Despu茅s, como buena pr谩ctica, inicia un repositorio local de Git dentro de la carpeta creada.

El s铆mbolo $ representa la l铆nea de entrada para los comandos en la terminal.

```bash

Terminal

$ mkdir npm $ cd npm $ git init Initialized empty Git repository in /pruebas/.git/ ```

Una vez creado el espacio correspondiente al proyecto de JavaScript. Deber谩s tener un archivo de configuraci贸n llamado package.json.

C贸mo estructurar un archivo de configuraci贸n package.json

El archivo package.json es un archivo de configuraci贸n que contiene la informaci贸n m谩s importante de tu proyecto como: datos espec铆ficos, dependencias, dependencias de desarrollo y archivos de ejecuci贸n.

Este archivo, como su extensi贸n lo indica, est谩 estructurado en formato JSON (JavaScript Object Notation) que sirve para una mejor lectura e interpretaci贸n para los usuarios y las m谩quinas.

Datos espec铆ficos del archivo package.json

Los datos espec铆ficos ayudan a identificar el proyecto y act煤an como una base para que los usuarios y los contribuidores obtengan informaci贸n sobre el proyecto.

El archivo package.json estar铆a estructurado inicialmente por las siguientes propiedades:

  • "name": Indica el nombre del proyecto.
  • "version": Indica la versi贸n del proyecto.
  • "description": Indica una breve descripci贸n del proyecto.
  • "main": Indica el archivo principal del proyecto.
  • "scripts": Indica los comandos a ejecutar del proyecto (no te preocupes por el comando test por ahora).
  • "keywords": Indica las palabras clave del proyecto.
  • "author": Indica el nombre y direcci贸n de correo electr贸nico del propietario del proyecto.
  • "license": Indica la licencia del proyecto.

El archivo package.json estar铆a estructurado de la siguiente manera:

```json // archivo package.json

{ "name": "npm", "version": "1.0.0", "description": "Constuir un paquete para node", "main": "src/index.js", "scripts": { "test": "echo \"Error no test specified\" && exit 1" }, "keywords": [ "javascript", "node", "package" ], "author": "TuNombre tucorreo@gmail.com", "license": "MIT" } ```

C贸mo utilizar el comando npm init

Aunque puedes crear el archivo de configuraci贸n manualmente, NPM te ayuda a crearlo r谩pidamente mediante el comando npm init. Este comando te permite ingresar los datos espec铆ficos del proyecto y genera el archivo package.json en tu directorio.

```bash $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults.

See npm help init for definitive documentation on these fields and exactly what they do.

Use npm install <pkg> afterwards to install a package and save it as a dependency in the package.json file.

Press ^C at any time to quit. package name: (npm) ```

Puedes ingresar tus propios datos, o utilizar la recomendaci贸n de NPM (lo que est谩 entre par茅ntesis) y solamente dar enter. Al final, te preguntar谩 si la configuraci贸n del package.json es correcta para generar el archivo.

```bash version: (1.0.0) description: Constuir un paquete para node entry point: (index.js) src/index.js test command: npm test git repository: keywords: javascript, node, package author: TuNombre tucorreo@gmail.com license: (MIT) About to write to /npm/package.json:

{ "name": "npm", "version": "1.0.0", "description": "Constuir un paquete para node", "main": "src/index.js", "scripts": { "test": "echo \"Error no test specified\" && exit 1" }, "keywords": [ "javascript", "node", "package" ], "author": "TuNombre tucorreo@gmail.com", "license": "MIT" }

Is this OK? (yes) ```

C贸mo utilizar el comando npm init --yes

El comando npm init --yes o npm init -y te ayudar谩 a crear un archivo package.json de manera r谩pida con una configuraci贸n por defecto, sin la necesidad de ingresar los datos.

Para establecer esta configuraci贸n por defecto, necesitar谩s utilizar el comando npm config set init-<atributo>. Te comparto algunas de las configuraciones por defecto m谩s comunes:

bash $ npm config set init-author-name "Tu Nombre" $ npm config set init-author-email "[email protected]" $ npm config set init-author-url "https://tuWeb.com" $ npm config set init-license "MIT" $ npm config set init-version "0.0.1"

De esta manera ya est谩s listo para gestionar dependencias de tu proyecto con NPM.

Contribuci贸n creada por Andr茅s Guano (Platzi Contributor).

Aportes 24

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Hola Chic@s 馃槂
Comparto mis apuntes

  • 鈥渘ame鈥: 鈥渘pm-init鈥 鈥> Podemos ponerle un nombre sin embargo toma por defecto el de la carpeta.

  • 鈥渧ersion鈥: 鈥1.0.0鈥 鈥> Podemos cambiar segun el caso, dependiendo un cambio mayor o uno menor

  • 鈥渄escription鈥:"" 鈥> Podemos hacer una breve descripcion del proyecto.

  • 鈥渆ntry point鈥: 鈥(index.js)鈥 鈥> Punto de entrada del proyecto.

  • 鈥渢est command鈥: 鈥> Podemos incluir los comandos para validar nuestro codigo.

  • 鈥済it repository鈥: 鈥> Podemos incluir el repositorio para mantenerlo en la nube

  • 鈥渒eywords鈥: [鈥渏avascript鈥, 鈥渁ngular鈥, 鈥渘ode鈥漖 鈥> Que va a utilizar nuestro proyecto.

  • 鈥渁uthor鈥: "Alexa Pulido<pulidoaleXXXXXXX> 鈥> Persona que crea el proyecto

  • 鈥渓icense鈥: 鈥淢IT鈥 鈥> Licencias, la mas utilizada es MIT, permite distribuir nuestro codigo.

en mi opini贸n este curso deber铆a estar mas arriba en la ruta, ya que en cursos pasados vi cosas de node y npm que apenas en este curso estoy despejando dudas, pero excelente curso!

Si usan Windows vayan a la fija e instalen y trabajen todo desde WSL. En el curso de Prework para Windows explican como Instalarlo y configurarlo

Les dejo un buen recurso donde pueden leer m谩s de la config y como pueden setear configuraciones default para cualquier proyecto futuro:

https://codeburst.io/setting-global-npm-defaults-for-quick-starting-new-projects-ed06ed22edb3

Yo uso git bash en el caso window, se me hace mas comodo que el wsl

Yo uso windows y para seguir los comandos de la clase uso git bash, que es como una terminal de linux pero en windows, pero cada quien que haga lo que mejor le venga

Para la gente que usa windows les invito a instalar
oh my posh o como indic贸 Oscar instalar WSL

que liviano se siente este curso, en comparaci贸n a los 煤ltimos dos jeje

Para los que usan Windows como yo les recomiendo usar WSL

Para los que usan linux

Remover node

sudo apt-get remove nodejs

Instalar nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

Actualizar Node a la ultima version (ultima version al dia de hoy)

nvm install 18.17.1

Actualizar npm a la ultima version

curl -qL https://www.npmjs.com/install.sh | sh

verificar

npm version

Fuentes

npm
node
freecodecamp

馃挕 Hola! las dependencias son importantes ya que con estas podemos reutilizar codigo de otros desarroladores de una forma rapida y sencilla, para instalar dependecias podemos hacerlo a travez de npm y yarn

驴Como Instalar una Dependecia?

Para Instalar una dependencia con npm iniciamos con la siguiente forma.

npm install <nombre de la dependecia>

Dependecias de Desarrollo

Al agregar --save-dev despues del nombre de la dependendecia estamos especificando que solo vamos a utillizar la dependecia en el entorno de desarrollo. Asi mismo podemos utilizar -D despues del nombre de la dependecia

npm install <nombre de la dependecia> --save-dev

#Tambien podemos utilizar

npm install <nombre de la dependecia> -D

Dependencias de Producci贸n

Al agregar 鈥-save despues del nombre de la dependecia estamos especificando que es una dependecia que utilizara en producci贸n

npm install <nombre de la dependecia> --save

Dependencias Globales

Al agregar 鈥攇 antes del nombre de la dependecia, estamos especificando que la dependecia que estamos instalando esta en el scope global

npm install -g <nombre de la dependecia>

馃敯 Archivos del Proyecto 馃敯


Pasos 馃搶

  • 鈥 Ir a la carpeta donde estar谩 el proyecto, se da click derecho y se selecciona 鈥淎brir en una terminal鈥 (con Ubuntu).
      • 鈼 Al abrir la terminal, se crea la carpeta npm con el siguiente comando (take: crea la carpeta y entra en ella):
take npm

  • 鈼 Se crea el primer mini-proyecto:
take npm-init

  • 鈼 Inicializamos el repositorio con git:
git init
  • 鈼 Inicializamos el proyecto con:
npm init
  • 鈼 Despu茅s de dar ENTER, aparecer谩n instrucciones que pueden editarse, se deja casi todas por defecto, excepto en keywords, en author y en license:
          package name: (npm-init) 
          version: (1.0.0) 
          description: 
          entry point: (index.js) 
          test command: 
          git repository: 
          keywords: javascript, angular, node
          author: Maria Rodriguez
          license: (ISC) MIT

  • 鈼 Al final muestra como ser谩 el archivo package.json de lo que hemos configurado:
          package.json:
          {
            "name": "npm-init",
            "version": "1.0.0",
            "description": "",
            "main": "index.js",
            "scripts": {
              "test": "echo \"Error: no test specified\" && exit 1"
            },
            "keywords": [
              "javascript",
              "angular",
              "node"
            ],
            "author": "Maria Rodriguez",
            "license": "MIT"
          }

  • 鈼 Pregunta si estamos de acuerdo con lo que se ha agregado, escribimos: yes y luego ENTER.

  • 鈼 Si ejecutamos el comando ls, se muestra el archivo package.json.

  • 鈼 Vamos abrir al editor VS Code, ejecutamos el comando:

code .

  • 鈻 Se abre el editor y se puede abrir el archivo package.json al dar click al men煤 izquierdo. Se puede editar directamente el archivo desde ah铆.

Les dejo este video de Sacha Lifszyc en un Platzi Live sobre las diferentes licencias que existen para el software:

Ver video

se puede desde git yo lo hago sin problema desde ahi

npm init -y es El comando para la inicializacion de Las confoguraciones por defecto
### Instalaci贸n de npm en Windows 1. **Descargar Node.js**: npm se instala autom谩ticamente junto con Node.js. Por lo tanto, necesitar谩s descargar e instalar Node.js, que incluir谩 tanto Node.js como npm. * Visita el sitio web de Node.js en <https://nodejs.org/>. * Descarga el instalador de Node.js para Windows. * Ejecuta el instalador y sigue las instrucciones para completar la instalaci贸n. Durante el proceso de instalaci贸n, aseg煤rate de seleccionar la opci贸n para instalar npm. 2. **Verificar la instalaci贸n de npm**: Una vez completada la instalaci贸n, puedes verificar la versi贸n de npm ejecutando el siguiente comando en el s铆mbolo del sistema (Command Prompt) o en PowerShell:bash聽Copy codenpm -v Esto mostrar谩 la versi贸n de npm instalada en tu sistema. 3. **Actualizar npm (opcional)**: Despu茅s de la instalaci贸n, es recomendable comprobar si hay actualizaciones disponibles para npm. Puedes ejecutar el siguiente comando para actualizar npm a la 煤ltima versi贸n:bash聽Copy codenpm install npm@latest -g Siguiendo estos pasos, podr谩s instalar npm en tu sistema Windows. Si tienes alguna otra consulta o necesitas m谩s ayuda, no dudes en preguntar. ![Your avatar](https://lh3.googleusercontent.com/a/ACg8ocJKYnoToBUF1rT0ijZ-76kD94zSOTTHKh28ZTdrU2eMQAg=s96-c)YouPrimeros pasos en NPM![Chatsonic](https://app.writesonic.com/_next/static/media/chatsonic.cdc6005b.svg)Chatsonic Al comenzar a trabajar con npm, es 煤til comprender algunos conceptos y realizar algunas tareas b谩sicas. Aqu铆 tienes una gu铆a de los primeros pasos para empezar a usar npm: ### Instalaci贸n de npm Antes de comenzar, aseg煤rate de tener npm instalado en tu sistema siguiendo los pasos adecuados para tu plataforma (Windows, macOS, Linux). ### Inicializaci贸n de un proyecto Para comenzar a utilizar npm en un proyecto, realiza los siguientes pasos: 1. **Crea un directorio para tu proyecto**: Abre una terminal y crea un nuevo directorio para tu proyecto. 2. **Inicializa tu proyecto con npm**: Dentro del directorio de tu proyecto, ejecuta el siguiente comando para inicializar un nuevo proyecto npm. Este comando crear谩 un archivo `package.json` que contendr谩 la informaci贸n sobre tu proyecto.bash聽Copy codenpm init Sigue las instrucciones en pantalla para proporcionar la informaci贸n solicitada sobre tu proyecto, como el nombre, la versi贸n, la descripci贸n, el punto de entrada, las pruebas, etc. ### Instalaci贸n de paquetes Una de las funciones principales de npm es la gesti贸n de dependencias a trav茅s de la instalaci贸n de paquetes. Puedes instalar paquetes de npm utilizando el comando `npm install`. Por ejemplo: * **Instalar un paquete como dependencia de producci贸n**:bash聽Copy codenpm install nombre\_del\_paquete * **Instalar un paquete como dependencia de desarrollo**:bash聽Copy codenpm install nombre\_del\_paquete --save-dev ### Uso de paquetes instalados Una vez instalados, puedes utilizar los paquetes en tu proyecto. Por ejemplo, si est谩s trabajando con un proyecto de JavaScript, puedes importar m贸dulos de los paquetes instalados en tu c贸digo. ### Actualizaci贸n de paquetes Puedes actualizar los paquetes instalados a la 煤ltima versi贸n utilizando el comando `npm update`. ### Publicaci贸n de paquetes (opcional) Si est谩s desarrollando un paquete que te gustar铆a compartir con la comunidad, puedes publicarlo en el registro p煤blico de npm. Para ello, necesitar谩s crear una cuenta en npm y seguir los pasos para publicar tu paquete.

package.json

Este archivo indica a npm que el directorio en el que se encuentra es en efecto un proyecto o paquete npm. Este archivo contiene la informaci贸n del paquete incluyendo la descripci贸n del mismo, versi贸n, autor y m谩s importante a煤n dependencias.

Este archivo es generado autom谩ticamente mediante la ejecuci贸n de un script de聽npm:npm init聽este script es ejecutado para inicializar un proyecto JavaScript, al ejecutarlo la l铆nea de comandos te har谩 algunas preguntas para crear el paquete:

 $ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (test)

Esta utilidad te guiar谩 en el proceso de crear un archivo package.json. Solo cubre los items m谩s comunes y trata de adivinar algunos valores por defecto. Revisa npm help init para documentaci贸n m谩s a fondo sobre estos campos y que hacen exactamente. Utiliza npm install <pkg> para instalar paquetes y guardarlos como dependencia en el archivo package.json. Presiona ^C en cualquier momento para cancelar

nombre del paquete: (que-es-npm)

Lo primero que ver谩s al ejecutar聽npm init聽es un mensaje como el anterior y la primera pregunta:聽nombre del paquete: (que-es-npm)聽que entre par茅ntesis mostrar谩 el nombre del directorio en el que se est谩 ejecutando como nombre por defecto.

Luego veras lo siguiente.

version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
author:
license (MIT):
private:

Puedes simplemente presionar聽Enter聽en cada una de estas opciones para dejar vaci贸 el campo o guardar el valor por defecto que se muestra entre par茅ntesis.

  • version: Corresponde a la versi贸n de tu proyecto. Lo ideal es mantener este campo actualizado cuando modificas algo en tu proyecto o librer铆a utilizando por ejemplo聽semver.
  • description: Una breve descripci贸n de tu proyecto. Particularmente importante si lo que est谩s creando es un paquete que publicar谩s v铆a npm.
  • entry point:聽Define cu谩l ser谩 el punto de 鈥渆ntrada鈥 de tu proyecto. Esto es, que archivo se ejecutar谩 cuando se importe tu proyecto dentro de otro. Nuevamente, especialmente importante para paquetes de librer铆as.
  • test command:聽Aqu铆 puedes definir el comando que quieres ejecutar para realizar las pruebas de tu proyecto, este comando se ejecutar谩 cuando escribas聽npm run test聽en tu terminal.
  • git repository: Define la url del repositorio git en donde este proyecto est谩 alojado, se utiliza para informar a los usuarios de tu paquete el repositorio en donde encontrar el c贸digo fuente del proyecto.
  • author:聽El nombre e email de quien cre贸 este proyecto.
  • license: Identifica el tipo de licencia de uso de tu proyecto. Permite a las personas saber que y que no est谩 permitido al usar tu c贸digo. Puedes encontrar la lista completa de licencias soportadas por este campo聽aqu铆.
  • private:聽Es un valor boolean que te permite evitar que tu paquete se publique en el repositorio. Si lo que est谩s creando es un proyecto personal este valor ser谩聽true.

Una vez contestadas todas las preguntas y terminado el proceso de inicializaci贸n tendr谩s un nuevo archivo dentro del directorio de tu proyecto:聽project.json聽cuyo contenido ser谩 similar a este

{
  "name": "que-es-npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "author": "Matias Hernandez <[email protected]> (<https://matiashernandez.dev>)",
  "license": "ISC"
}

驴Qu茅 es npm?

npm聽es parte esencial de Node.js, el entorno de ejecuci贸n de JavaScript en el lado del servidor basado en el motor V8 de Google. Es muy seguramente la principal raz贸n del gran 茅xito de Node permitiendo que cientos de desarrolladores puedan compartir paquetes de software entre distintos proyectos.

En este momento, se han publicado 1,493,231 paquetes por medio de su repositorio con m谩s de 27 mil millones de descargas.

npm聽responde a las siglas de聽Node Package Manager聽o manejador de paquetes de node, es la herramienta por defecto de JavaScript para la tarea de compartir e instalar paquetes.

Tal como reza su documentaci贸n,聽npm聽se compone de al menos dos partes principales.

  • Un repositorio online para publicar paquetes de software libre para ser utilizados en proyectos Node.js
  • Una herramienta para la terminal (command line utility) para interactuar con dicho repositorio que te ayuda a la instalaci贸n de utilidades, manejo de dependencias y la publicaci贸n de paquetes.

Es decir, en tu proyecto basado en Node 鈥 que actualmente incluye los proyectos de aplicaciones web que utilizan Node para su proceso de compilaci贸n y generaci贸n de archivos 鈥 utilizar谩s la utilidad de linea de comandos (cli) para consumir paquetes desde el repositorio online, un listado gigantesco de soluciones de software para distintos problemas disponibles p煤blicamente en聽npmjs.com聽y para manejar dependencias, y para ello necesitas un archivo de configuraci贸n que le diga a聽npm聽que este es un proyecto node.

Recomendaci贸n para los usuarios de Windows: WSL, Oh My Zsh!, PowerToys

Recomiendo encarecidamente el uso de WSL, no solo tienes la ventaja de mantener tu sistema Windows como a ti te guste, sino que puedes aprovechar todas las ventajas de desarrollo en Linux o MacOS. En definitiva, es la mejor opci贸n para desarrolladores.

Yo personalice mi terminal de Windows con distintas distribuciones, tambien modifique mi shell de Ubuntu en WSL con Oh My Zsh!

Les dejo una captura para que vean que lindo queda, aunque les recomiendo indagar m谩s en el tema de WSL para poder personalizarlo.



N贸tese que la terminal tiene un grado de transparencia que lo puedes modificar a gusto, tambien puedes ponerle un fondo de pantalla.


Pera personalizar su terminal les dejo este tutorial en Platzi y otro de fuente externa, aunque muy bien explicado tambien.

F铆jense que utilizo el tema Agnoster 馃憖 que me permite visualizar los cambios en Git y acciones a realizar. Tambien instale NVM para manejar las ultimas versiones de Node.js desde WSL, cosa que no lo hace por defecto. En clases anteriores deje indicaciones de como instalar NVM en WSL.

Comento esto porque veo a muchos recomendando utilizar WSL, yo desde que comenc茅 en Platzi y vi la clase de Prework en Windows lo vengo utilizando, solo comet铆 dos veces un error severo que me llevo a reinstalar WSL. 馃ぃ

Tambien recomiendo el uso de PowerToys, son herramientas indispensables para el 谩mbito de desarrollo.

  • Les dejo un video resumido de lo que se puede hacer con PowerToys para Windows.


Pero bueno, de los errores se aprenden. No tengan miedo y vayan adelante con su terminal personalizada. 鉁

No te rindas, animo en este aprendizaje. 馃挭

Actualizar de forma manual NVM para que puedas tener multiples ambientes con diferentes versones de node.

(requires git v1.7.10+):

Cambier de locaci贸n en la terminal a $NVM_DIR
Fetch las 煤ltimas actualizaciones
Cambien a la rama m谩s actualizada usando git describey el siguiente regex
Activen la nueva versi贸n

(
  cd "$NVM_DIR"
  git fetch --tags origin
  git checkout `git describe --abbrev=0 --tags --match "v[0-9]*" $(git rev-list --tags --max-count=1)`
) && \. "$NVM_DIR/nvm.sh"

Source.

Vas a amar NPM!
Simplemente ahi afuera hay codigo bien contruido y bien hechito que le caeria de pelos a tu proyecto.
No tienes la necesidad de copiarlo y ponerlo tu mismo en archivos y agregarlo y鈥 etc etc. Por favor, no!

Ejemplo: Ten, un 鈥渘ormalizador鈥 de estilos por defecto para tu projectos con CSS :

npm i normalize.css

Ya esta, un paquete que contiene un solo archivo .css que se incluye automaticamente en tu carpeta.

Maravilla!

Pasos de la clase:

  • Crear espacio de trabajo -> mkdir npm -> cd npm
  • Crear -> mkdir npm-init ->cd npmn-init -> git init (clear limpiar terminal)
  • npm init -> crear base del proyecto con datos del mismo
  • Tambien se puede utilizar -> npm init -y para generar el archivo package.json

Apunte en Notion