Máster en Programación FullStack con JavaScript y Node.js

JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing

Clase 50

NPM

Documentación

Web Oficial
Features
Pricing
Documentación
NPM Community
NPM en Github
@npmjs en Twitter
@npmstatus en Twitter
@npm_support en Twitter

Instalar paquetes:

global:

npm install -g <paquete>

local:

npm install <paquete>

Buscar paquetes

  npm search <paquete>

Información de los paquetes

  npm view <paquete>

Lista de paquetes instalados

  npm ls

Lista de paquetes instalados globalmente

  npm ls -g

Instalando versiones especificas:

la más reciente:

  npm install <paquete>@latest

versión especifica:

  npm install <paquete>@1.x (1.xx.xx)

Otra versión especifica

  npm install <paquete>@2.10.x (2.10.x)

Paquetes desactualziados:

npm outdated

Actualizando paquetes:

npm update <paquete>

Desinstalando paquete:

npm uninstall <paquete>

Información sobre Bugs

npm bugs <paquete>

Más comandos - CLI

npx

¿Que es NPX?
Intro a NPX
NPM vs NPX
Difference between npx and npm?

A partir de la versión v5.2.0 de npm se incluye un nuevo binario llamado npx.

Al igual que npm permite manejar las dependencias de un proyecto a través del repositorio de paquetes, con npx también vamos a poder manejar ejecutables que no tengamos instalados en nuestra máquina. Si ejecutamos un comando a través de npx (ej. npx cowsay "Hola") se intentará ejecutar dicho paquete desde nuestro directorio actual, en el caso de que no se encuentre descargado se descargará automáticamente y se ejecutará.

Un uso común que se le puede dar es el de ejecutar paquetes que normalmente no utilizamos a menudo (por ejemplo yeoman o create-react-app), como pueden ser generadores de código o paquetes que no queramos descargar para ocupar sitio en el disco.

También se puede utilizar para invocar paquetes en otras versiones de node:

# Con "-p" añadimos un paquete a "$PATH"
npx -p node@8 npx cowsay "Hola"

# Descargamos cowsay y lolcatjs, a continuación hacemos un "echo"
# y la salida se la pasamos a "cowsay" y "lolcat"
npx -p cowsay -p lolcatjs -c 'echo "$npm_package_name@$npm_package_version" | cowsay | lolcatjs'

Dependency Hell:

Abyssus abyssum invocat. El abismo llama al abismo (Un paso en falso lleva a otro).

nipster
Nodei.co
Dependency Hell
David Dm
ShieldsIO
- Your Badge Service
Snyk: Open Source Security Platform
- The State of Open Source Security

package.json

Datos proyecto
Tareas
Dependencias (dependencies y devDependencies)
Documentación
Creación:

  npm init

Guardar nuevas dependencias:

 npm install <paquete> --save

Guardar nuevas dependencias (solo para entorno desarrollo):

 npm install <paquete> --save -dev

Guardando versiones especificas:
- (1.xx.xx):

  npm install --save <paquete>@1.x

(2.10.x)

  npm install --save <paquete>@2.10.x

Latest

  npm install --save <paquete>@lastest

Quitando dependencias:

  npm uninstall <paquete> --save

Instalamos las dependencias en el proyecto:
- todo:

  npm install (todo)

Solo production:

  npm install --production (solo producción)

Solo development:

  npm install --dev

Semantic Versioning
- Estructura -> X.Y.Z-Extra
- Cambio Mayor - No retrocompatible
- Cambio Menor - Retrocompatible - Nuevas funcionaldiades o cambios
- Parche - Retrocompatible - Solución de errores
- Extras - Indicativos o versiones especiales (Beta, Alfa, x86, etc...)

npm scripts (comandos de CLI)

Añadiendo comandos:

  // ...
  "scripts": {
      "test": "npm -v",
      "start": "node -v",
      "hola": "echo 'Hola mundo!'"
  }
  // ...

Mostrando todos los comandos:

    npm run

Ejecutando comandos:
- test

    npm test

start

    npm start

hola

    npm run hola

YARN

Documentación

Web
Empezar
Documentación
Paquetes
Blog
Instalar Yarn

Iniciar un proyecto

yarn init

Añadir dependencias al proyecto

yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]

Añadir dependencias al proyecto en categorías

yarn add [package] --dev
yarn add [package] --peer
yarn add [package] --optional

Actualizar dependencias

yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

Eliminar dependencias

yarn remove [package]

Instalar todas las dependencias

yarn
yarn install

¿quien pidio este paquete?

yarn why [package]

Yarn o NPM@5?

Yarn es mas rapido
Yarn es más seguro

Recursos

NPM5 vs NPM6 vs YARN
Should you choose npm or yarn?
npm@5 — Yarn killer?
¿Tiene sentido Yarn ahora que tenemos npm 5?
Does NPM 5 deprecate yarn?
Why I’m Sticking With Yarn (Sorry NPM 5)
The npm Blog | v5.0.0
Why i still don't use yarn
NPM@5 Arrived. But Is It As Fast As Yarn?
npm vs Yarn – Which Package Manager Should You Use?
Yarn vs npm: Everything You Need to Know
It depends. The art of dependency management in Javascript

Bower

Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

Bower
Documentación - API
Tendencias Bower
Buscador Bower

Bower Instalamos Bower globalmente

  sudo npm install -g bower

Dependencias

  /home/ubuntu/.nvm/versions/node/v4.1.1/bin/bower -> /home/ubuntu/.nvm/versions/node/v4.1.1/lib/node_modules/bower/bin/bower
  bower@1.6.6 /home/ubuntu/.nvm/versions/node/v4.1.1/lib/node_modules/bower
  ├── is-root@1.0.0
  ├── destroy@1.0.3
  ├── stringify-object@1.0.1
  ├── junk@1.0.2
  ├── chmodr@1.0.2
  ├── user-home@1.1.1
  ├── q@1.4.1
  ├── abbrev@1.0.7
  ├── opn@1.0.2
  ├── bower-endpoint-parser@0.2.2
  ├── bower-logger@0.2.2
  ├── lockfile@1.0.1
  ├── archy@1.0.0
  ├── graceful-fs@3.0.8
  ├── nopt@3.0.6
  ├── lru-cache@2.7.3
  ├── retry@0.6.1
  ├── tmp@0.0.24
  ├── semver@2.3.2
  ├── md5-hex@1.1.0 (md5-o-matic@0.1.1)
  ├── fs-write-stream-atomic@1.0.4 (graceful-fs@4.1.2)
  ├── p-throttler@0.1.1 (q@0.9.7)
  ├── request-progress@0.3.1 (throttleit@0.0.2)
  ├── shell-quote@1.4.3 (array-filter@0.0.1, array-reduce@0.0.0, jsonify@0.0.0, array-map@0.0.0)
  ├── chalk@1.1.1 (escape-string-regexp@1.0.3, supports-color@2.0.0, ansi-styles@2.1.0, strip-ansi@3.0.0, has-ansi@2.0.0)
  ├── bower-json@0.4.0 (intersect@0.0.3, deep-extend@0.2.11, graceful-fs@2.0.3)
  ├── promptly@0.2.0 (read@1.0.7)
  ├── fstream@1.0.8 (inherits@2.0.1, graceful-fs@4.1.2)
  ├── which@1.2.0 (is-absolute@0.1.7)
  ├── bower-registry-client@1.0.0 (async@0.2.10, graceful-fs@4.1.2, request-replay@0.2.0, mkdirp@0.3.5)
  ├── mkdirp@0.5.0 (minimist@0.0.8)
  ├── glob@4.5.3 (inherits@2.0.1, inflight@1.0.4, once@1.3.3, minimatch@2.0.10)
  ├── fstream-ignore@1.0.3 (inherits@2.0.1, minimatch@3.0.0)
  ├── rimraf@2.4.4 (glob@5.0.15)
  ├── insight@0.7.0 (object-assign@4.0.1, async@1.5.0, tough-cookie@2.2.1, lodash.debounce@3.1.1, configstore@1.3.0, os-name@1.0.3)
  ├── bower-config@1.2.2 (graceful-fs@4.1.2, osenv@0.1.3, optimist@0.6.1)
  ├── github@0.2.4 (mime@1.3.4)
  ├── tar-fs@1.8.1 (pump@1.0.1, tar-stream@1.3.1)
  ├── request@2.53.0 (forever-agent@0.5.2, aws-sign2@0.5.0, caseless@0.9.0, tunnel-agent@0.4.1, oauth-sign@0.6.0, isstream@0.1.2, stringstream@0.0.5, json-stringify-safe@5.0.1, tough-cookie@2.2.1, qs@2.3.3, node-uuid@1.4.7, form-data@0.2.0, mime-types@2.0.14, combined-stream@0.0.7, http-signature@0.10.1, bl@0.9.4, hawk@2.3.1)
  ├── cardinal@0.4.4 (ansicolors@0.2.1, redeyed@0.4.4)
  ├── update-notifier@0.3.2 (is-npm@1.0.0, string-length@1.0.1, semver-diff@2.1.0, latest-version@1.0.1)
  ├── decompress-zip@0.1.0 (mkpath@0.1.0, touch@0.0.3, readable-stream@1.1.13, binary@0.3.0)
  ├── handlebars@2.0.0 (optimist@0.3.7, uglify-js@2.3.6)
  ├── inquirer@0.10.0 (strip-ansi@3.0.0, ansi-regex@2.0.0, figures@1.4.0, ansi-escapes@1.1.0, cli-width@1.1.0, rx-lite@3.1.2, through@2.3.8, readline2@1.0.1, cli-cursor@1.0.2, run-async@0.1.0, lodash@3.10.1)
  ├── mout@0.11.1
  └── configstore@0.3.2 (object-assign@2.1.1, xdg-basedir@1.0.1, uuid@2.0.1, osenv@0.1.3, js-yaml@3.4.5)

Arrancamos bower.json

  bower init

  {
    "name": "pruebas_bower",
    "homepage": "https://github.com/UlisesGascon/Curso-in-company-NexTReT",
    "authors": [
      "ulisesgascon"
    ],
    "description": "",
    "main": "",
    "moduleType": [],
    "license": "MIT",
    "private": true,
    "ignore": [
      "**/.*",
      "node_modules",
      "bower_components",
      "test",
      "tests"
    ]
  }

Buscamos paquetes

  bower search <paquete>
  bower search jquery

Instalando Paquetes

  bower install <paquete>
  bower install jquery

Instalando versiones especificas del paquete

  bower install <package>#<version>

Instalando Paquetes y guardandolos en bower.json

  bower install <paquete> -save
  bower install bootstrap -save

  ulisesgascon:~/workspace/profe/pruebas_bower (master) $ bower install bootstrap -save
  bower jquery#~2.1.4             cached git://github.com/jquery/jquery.git#2.1.4
  bower jquery#~2.1.4           validate 2.1.4 against git://github.com/jquery/jquery.git#~2.1.4
  bower bootstrap#*           not-cached git://github.com/twbs/bootstrap.git#*
  bower bootstrap#*              resolve git://github.com/twbs/bootstrap.git#*
  bower bootstrap#*             download https://github.com/twbs/bootstrap/archive/v3.3.5.tar.gz
  bower bootstrap#*              extract archive.tar.gz
  bower bootstrap#*             resolved git://github.com/twbs/bootstrap.git#3.3.5
  bower jquery#~2.1.4            install jquery#2.1.4
  bower bootstrap#~3.3.5         install bootstrap#3.3.5

  // bower.json
  {
    "name": "pruebas_bower",
    "homepage": "https://github.com/UlisesGascon/Curso-in-company-NexTReT",
    "authors": [
      "ulisesgascon"
    ],
    "description": "",
    "main": "",
    "moduleType": [],
    "license": "MIT",
    "private": true,
    "ignore": [
      "**/.*",
      "node_modules",
      "bower_components",
      "test",
      "tests"
    ],
    "dependencies": {
      "jquery": "~2.1.4",
      "bootstrap": "~3.3.5"
    }
  }

Borrando paquetes

  bower uninstall <paquete>
  bower uninstall jquery

Borrando paquetes y guardandolos en bower.json

  bower uninstall <paquete>
  bower uninstall jquery

Verificando los paquetes instalados y sus dependencias

  bower list

  ulisesgascon:~/workspace/profe/pruebas_bower (master) $ bower list
  bower check-new     Checking for new versions of the project dependencies...
  pruebas_bower /home/ubuntu/workspace/profe/pruebas_bower
  ├─┬ bootstrap#3.3.5 (latest is 4.0.0-alpha)
  │ └── jquery#2.1.4 (3.0.0-alpha1+compat available)
  └── jquery#2.1.4 (latest is 3.0.0-alpha1+compat)

Actualizando todo

  bower update

Actualizando un paquete específico

  bower update <package>

Usando Bower

  bower list -paths

  ulisesgascon:~/workspace/profe/pruebas_bower (master) $ bower list -paths

    bootstrap: [
      'public/vendor/bootstrap/less/bootstrap.less',
      'public/vendor/bootstrap/dist/js/bootstrap.js'
    ],
    jquery: 'public/vendor/jquery/dist/jquery.js'

  <!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <title>Bootstrap 101 Template</title>

      <!-- Bootstrap -->
      <link href="public/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    </head>
    <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="public/vendor/jquery/dist/jquery.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="public/vendor/bootstrap/dist/js/bootstrap.js"></script>
    </body>
  </html>

Bower (Entendiendo el funcionamiento)

bower.json. ¿Qué necesitamos?

  {
      "name": "Mi Aplicación",
      "version": "1.0.0",
      "dependencies": {
          "modernizr": "*",
          "jquery": "~2.0.2",
          "bootstrap": "*",
          "requirejs": "*"
      }
  }

.bowerrc ¿Donde lo necesitamos?

  {
      "directory": "public/vendor",
      "json": "bower.json"
  }

Instalamos todo lo anterior

  bower install

Bower (Trucos)

Se puede instalar componentes aislados primero y luego hacer bower init para generar el bower.json con todo incluido.
Ignoramos la carpeta bower_components con .gitignore. Recuerda que haciendo bower.init se instala todo de nuevo.
Instalación de paquetes más alla de los definidos en search:
Paquetes registrados:

  $ bower install jquery

Acesso directo -> GitHub:

  $ bower install desandro/masonry

.git:

  $ bower install git://github.com/user/package.git

URLs:

  $ bower install http://example.com/script.js

Los problemas de BOWER

Limitaciones

Gestión de conflictos manual
Fiarnos del patrón SEMVER por parte de otr@s developers
Sistema de paquetes propio
Redundancia respecto a NPM
Maravillo mundo del Dependency hell

Bower ha muerto

BOWER is dead. Only use it for legacy reasons.

Literatura al respecto

Bower/bower #2298: Consider deprecating Bower
Bower is dead, long live npm. And Yarn. And webpack in snyk.io/blog by Assaf Hefetz
Reddit: Is bower dead? Should we start using other dependency managers?
Quora: Is Bower dying?

La nueva generación

Paso 1: Tus herramientas son las de siempre

NPM
YARN
webpack

Paso 2: Pasar del bower.json al package.json

Paso 3: Deja de usar wiredep y empieza a usar solamente require()

Nota: Esto es al estilo Browserify exclusivamente

wiredep: Wire Bower dependencies to your source code
browserify: browser-side require() the node.js way
Debes instalar browserify de forma global con npm install -g browserify

Ejemplo de carga de dependencias

var $ = require('jquery'),
    _ = require('lodash'),
    angular = require('angular');
//..

Puedes comprimir y unificar todo el JS en un solo comando browserify app.js -o bundle.js y en un único fichero <script src="bundle.js"></script>
Si ademas instalas watchify con watchify app.js -o bundle.js refescas los cambios en tiempo real.

Extra 1: Cosas Interesantes

Usar el campo browser en el package.json

Extra 2: Un mundo de información te espera

Why We Should Stop Using Bower – And How to Do It
Browserify VS Webpack - JS Drama
npm and front-end packaging
The jQuery Module Fallacy

Extra 3: Ejemplos

Ejemplo Webpack
Ejemplo Webpack
Ejemplo Webpack
Ejemplo Browserify

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

clase50.md

clase50.md

Máster en Programación FullStack con JavaScript y Node.js

JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing

Clase 50

NPM

npx

Dependency Hell:

package.json

npm scripts (comandos de CLI)

YARN

Bower

Los problemas de BOWER

Bower ha muerto

La nueva generación

Files

clase50.md

Latest commit

History

clase50.md

File metadata and controls

Máster en Programación FullStack con JavaScript y Node.js

JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing

Clase 50

NPM

npx

Dependency Hell:

package.json

npm scripts (comandos de CLI)

YARN

Bower

Los problemas de BOWER

Bower ha muerto

La nueva generación