npm.txt

=================
Guía de npm by dM
=================

====
Nota
====

Usaremos $ para describir los comandos que se usaran con usuario regular.

Usaremos # para describir los comandos que se usaran con superusuario.

============
¿Qué es npm?
============

NPM es el manejador de paquetes por defecto para Node.js, es como decir apt para
GNU/Linux Debian o PIP para Python.

JavaScript ha pasado de ser un lenguaje utilizado para brindar interactividad a
las páginas web, a ser utilizado ahora también en el lado de los servidores
gracias a Node.js, leer guía de Node. Dentro de Node, el código se organiza por
módulos o paquetes, así que al momento de trabajar con él va a ser necesario
agregar más módulos, es aquí donde entra npm.

Node Package Manager o simplemente npm es un gestor de paquetes, el cual hará
más fáciles nuestras vidas al momento de trabajar con Node, ya que gracias a él
podremos tener cualquier librería disponible con solo una línea de código, npm
nos ayudará a administrar nuestros módulos, distribuir paquetes y agregar
dependencias de una manera sencilla.

Cuando instalamos nuevos paquetes lo que hace npm es instalarlo de manera local
en nuestro proyecto dentro de la carpeta node_modules, pero nosotros podemos
decirle que lo instale de manera global de ser necesario.

Cuando instalamos paquetes se genera el directorio node_modules y un archivo
package-lock.json que es el responsable de llevar un historial de los cambios
realizados dentro de node_modules o cuando se realizan cambios en el archivo
package.json.

Además, existen módulos que ya vienen instalados por defecto en Node.js por lo
que no será necesario usar npm para traerlas, a estos módulos se les conoce como
"módulos nativos".

Para instalar npm en nuestro ordenador es necesario primero tener Node.js. Así
que verificaremos que se encuentre instalado, para eso vamos a usar el siguiente
comando:

$ nodejs -v

ó

$ nodejs --version

==================
Instalacion de npm
==================

# apt-get install npm

Para instalar un paquete con npm vamos a hacerlo de la siguiente manera,
escribiendo:

$ npm install nombre_paquete@version

Esto se instalará de manera local(en el proyecto), pero si queremos instalarlo
de manera global tenemos que agregar el -g después del nombre del paquete:

$ npm install Nombre_paquete@version -g

Al momento de iniciar un proyecto sobre el que queremos instalar dependencias a
través de npm, es recomendable ubicarnos en nuestro proyecto desde una terminal
y ejecutar el comando:

$ npm init

Este comando nos pedirá una serie de datos acerca de nuestro proyecto y una vez
finalizado creará el archivo package.json.

El archivo package.json es el responsable de almacenar el nombre de las
dependencias instaladas catalogándolas principalmente en dos tipos: dependencias
de desarrollo y dependencias de la aplicación.

$ npm init -y

El -y es para que se salte el cuestionario inicial por completo, esto nos crea
el archivo package.json.

=================================
Actualización de paquetes locales
=================================

Acceder al directorio del proyecto y luego ejecutar:

$ npm update

================================================
Actualización de paquetes instalados globalmente
================================================

1) Se debe actualizar la versión de npm

$ npm install npm@latest -g

2) Actualizar un paquete específico

$ npm update -g package_name

3) Actualización de todos los paquetes instalados globalmente:

$ npm update -g

===============
Comandos de npm
===============

Con este comando las aplicaciones compilarán todos los paquetes o modulos que se
encuentrn instalados y unificará los archivos en generalmente 2 que se
especifíquen como app.js y app.css por ejemplo.

$ npm run dev

-----

Con este comando las aplicaciones compilarán todos los paquetes que se
encuentren instalados y unificará los archivos en generalmente 2 que se
especifíquen como app.js y app.css por ejemplo.

$ npm run prod

Diferencias entre run dev y run prod
====================================

run dev: Compilar para desarrollo, los archivos resultantes mantienen el código
fuente desminificados. Las herramientas usadas en el navegador identifican los
objetos y componentes para poder depurar el código.

run prod -> compilar para producción, los archivos resultantes estan
minificados. Las herramientas de desarrollo usadas en el navegador no pueden
acceder a los componentes u objetos por lo que es complicado poder interactuar
con ellos a través del navegador.

-----

Agregar e instalar un nuevo paquete a la lista de paquetes.

$ npm add name_package

-----

Agregar e instalar un nuevo paquete a la lista de paquetes especificando la
versión.

$ npm add [package]@[version]

Ejemplo: 

$ npm add express@4.16.1

-----

Instalar una versión específica de un paquete

$ npm install [package]@[version]

Ejemplo: 

$ npm install express@4.16.1

================
El paquete serve
================

Suponiendo que le gustaría servir un sitio estático, una aplicación de una sola
página o simplemente un archivo estático (sin importar si está en su dispositivo
o en la red local), este paquete es la opción correcta para usted.

1) Instalación, -g para que se instale de manera global:

$ sudo npm install serve -g

2) Correr el servidor:

$ serve .

Te debe mostrar algo como:

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   Serving!                                      │
   │                                                 │
   │   - Local:            http://localhost:5000     │
   │   - On Your Network:  http://172.16.0.41:5000   │
   │                                                 │
   │   Copied local address to clipboard!            │
   │                                                 │
   └─────────────────────────────────────────────────┘

3) Consultar la URL http://localhost:5000 para verificar que la página está
siendo servida.

=============================
El paquete webpack-dev-server
=============================

En esencia, webpack es un paquete de módulos estáticos para aplicaciones
JavaScript modernas. Cuando webpack procesa su aplicación, crea internamente un
gráfico de dependencia que mapea cada módulo que su proyecto necesita y genera
uno o más paquetes.

=======
webpack
=======

webpack es un paquete de módulos de JavaScript de código abierto. Está hecho
principalmente para JavaScript, pero puede transformar activos de front-end como
HTML, CSS e imágenes si se incluyen los loaders correspondientes.  webpack toma
módulos con dependencias y genera archivos estáticos que representan esos
módulos.

Webpack toma las dependencias y genera un gráfico de dependencia que permite a
los desarrolladores de la web utilizar un enfoque modular para sus propósitos de
desarrollo de aplicaciones web. Se puede utilizar desde la línea de comandos, o
se puede configurar utilizando un archivo de configuración que se llama
webpack.config.js. Este archivo se utiliza para definir reglas, plugins, etc.
para un proyecto. (webpack es altamente extensible a través de reglas que
permiten a los desarrolladores escribir tareas personalizadas que quieren
realizar cuando se agrupan los archivos).

Node.js es necesario para usar el webpack.

=======
Modulos
=======

En la programación modular, los desarrolladores dividen los programas en partes
discretas de funcionalidad llamadas módulo.

Cada módulo tiene una superficie más pequeña que un programa completo, lo que
hace que la verificación, la depuración y las pruebas sean triviales. Los
módulos bien escritos proporcionan abstracciones sólidas y límites de
encapsulación, de modo que cada módulo tiene un diseño coherente y un propósito
claro dentro de la aplicación general.

Node.js ha admitido la programación modular casi desde sus inicios. En la web,
sin embargo, el soporte para módulos ha tardado en llegar. Existen varias
herramientas que admiten JavaScript modular en la web, con una variedad de
beneficios y limitaciones.  webpack se basa en las lecciones aprendidas de estos
sistemas y aplica el concepto de módulos a cualquier archivo de su proyecto.

=======
Fuentes
=======

-https://devcode.la/blog/que-es-npm/
-https://styde.net/como-instalar-paquetes-con-npm-en-laravel/

======================
Desinstalar un paquete
======================

$ npm uninstall name_package

====================================
Actualizar lista de paquetes de node
====================================

Este comando actualizará todos los paquetes listados a la última versión.

$ npm update

===========================================
Ver la lsita de paquetes de node instalados
===========================================

$ npm ls

y

$ npm list

============================
Actualizar la versión de npm
============================

$ npm install -g npm

=====================================================
Actualizar la versión de npm a una versión específica
=====================================================

$ npm install -g npm@8.11.0

=============================================
Ejemplo de .gitignore para Proyecto de NodeJS
=============================================

node_modules
build
npm-debug.log
.env
.DS_Store

===========
Live Server
===========

Este es un pequeño servidor de desarrollo con capacidad de recarga en vivo.

Úselo para piratear sus archivos HTML/JavaScript/CSS, pero no para implementar
el sitio final.

No es necesario instalar ningún complemento del navegador ni agregar manualmente
fragmentos de código a sus páginas para que funcione la función de recarga;

Instalación
===========

$ npm install -g live-server

Luego, dentro de la carpete del proyecto, donde exista index.html ejecutamos:

$ live-server

Esto nos permite servir nuestro sitio desde http://127.0.0.1:8080 lo visitamos
en el navegar y listo, si actualizamos el código fuente se actualiza en vivo.

=============================
¿Cómo borrar el caché de npm?
=============================

Para borrar un caché en npm, debemos ejecutar el comando en nuestra terminal:

$ npm cache clean --force

El comando de limpieza que se muestra arriba borra todos los datos presentes en
su carpeta de caché. Para verificar si su caché se borra o no, debe usar el
siguiente comando.

$ npm cache verify

Fuente
======

https://www.javatpoint.com/npm-clear-cache

=========================
El error de popperjs/core
=========================

Module not found: Error: Can't resolve '@popperjs/core'

Este error da al ejecutar npm run dev, se soluciona ejecutando lo siguiente:

$ npm i @popperjs/core

$ npm run dev

=================================================
Si el sistema redirecciona la url a popper.js.map
=================================================

ir a webpack.mix.js y agragrar .sourceMaps() tal que:

mix.js('resources/js/app.js', 'public/js')
    .sourceMaps()
    .vue()
    .sass('resources/sass/app.scss', 'public/css');